Getting started with React.lazy
React.lazy was introduced in React 16.6. It is a function which lets you import components dynamically when it needs to be rendered. Splitting your code to smaller bundle files.
Let’s look at an example
First let’s see how we can benefit from using React.lazy with routing. If you ever used React Router, you know, you import each component you need, and then “register” a <Route /> for it.
This means all routes are added in advanced to your bundle.js file.
Here is an example of using React Router combined with React.lazy
Going over the code, we can see, this is my ‘App’ component, where I register my routes. If you look at the top of the file, you can see that instead of your regular import, I’m importing my component using React.lazy.
const Angel = React.lazy(() => import('../Angel'));
React.lazy takes a function that must call a dynamic import().
If you’ll take a closer look at the code you, you’ll see my routes are surrounded with <Suspense></Suspense>. This post should have been titled “Getting started with React.lazy and suspense” because there is no React.lazy without suspense. If you do try to use a lazy loaded component without surrounding it with <Suspense></Suspense>, you will get an error.
<Suspense></Suspense> works just like Error boundaries.
If you don’t know Error boundaries, it is just like JavaScript try and catch.
You can have one for your entire code. But if you have one try catch inside another, the one closer to your code will be the one catching your error.
I prefer using my suspense as close to the lazy loaded component as possible. This is because of the suspense fallback attribute. The fallback attribute is what the user will see while waiting for the lazy component bundle file to be loaded. It will replace all of his children components whether they are lazy loaded or they are already rendered.
If the user is on a fast connection, he will probably won’t even notice something was rendered before the final result. But if he is on a slow connection, he will see our fallback component. The fallback can be anything that React can render. In our case, an h2 tag saying “Loading…”
Loading when needed
My next example, will show you how you can load a component only when needed. For example when a user clicks a button.
As you can see, we don’t even render the suspense component until the user clicks the button.
When the user clicks the button, we first load our lazy component and then set the state. This will render the suspense component and its children. By first loading the lazy component, we ensure that the suspense won’t try to load an undefined component.
In conclusion
Using React.lazy in your app can be a great thing. Especially for your first load, making your bundle smaller. But you should take in mind the "fallback” when thinking on user experience.
Take a look at demo app and the network panel
One last thing, if for some reason you are using a React version earlier than React 16.6 and you still want to lazy load your components, here is a short example on implementing an asynchronous component loader.
This will enable you load a component asynchronously just like React.lazy.
<Route exact path="/" component={props => <AsyncComp propsToPass={props} loadingPromise={import('./Home')} />} />As usual, I hope you liked this post and found it useful.
