This article is originally written here with the code snippets -> https://easyontheweb.com/lazy-loading-components-in-react/
If you’ve been writing frontend code for some while now I’m sure you must have heard of the terms lazy loading and code-splitting. These are techniques that are used to improve the performance and load time of your application on the browser. How ? That is what we’ll discuss in this article where we’ll be discussing lazy loading component in React.
Lazy loading is beneficial for your frontend applications in the sense that implementing that can reduce the initial load time of your web application.
We will see in this article what lazy loading is, how lazy loading is significant in reducing start up time, how we can implement lazy loading of components in React and also some disadvantages of lazy loading.
What is lazy loading ?
Let us start by seeing what lazy loading actually is. As you know in single page applications we just load a single javascript file into our HTML and render that onto the browser. This single file is often called the bundle and is something that is downloaded by the user’s browser when he/she initially loads up our web application.
Naturally, the smaller this bundle file will be the quicker it will get downloaded by the browser of the user and hence quicker the start up time of our application. Therefore, it is always an aim of we, as the developers to keep the bundle file as small as possible. Usually this bundle file is bundled up using a tool like Webpack or parcel or any other bundler.
Now, what happens by default is that all the Javascript code gets bundled up together into this bundle.js file and this is then downloaded by the browser. This is the default behaviour.
But just think about this – what if there is a component in your application that is like 50% of the code in your app but that component is opened by only 5% of the users. The issue here is that the code for even this component is bundled up into the initial bundle and the user has to download it as well (even if he never opens that component ever). This is not something very optimal right ? The initial start up time suffers in this case even though the user never visits that page.
This is where lazy loading comes in. The method described earlier when all the code is bundled into a single file is called eager loading. Lazy loading is quire the opposite of it, whenever a component is being lazy loaded, it means that the component’s code will only be loaded when we visit the page where that component is being used.
How cool would that be? The user would only have to download the 50% code for that huge component if he ever visits that component, otherwise not! This would of course reduce the size of the initial bundle and hence, decrease the start up time of the application.
Some disadvantages of lazy loading
Even though I wanted to keep this section at the end of the article, I decided to keep it here on purpose. In development in general, everything has a positive and a negative and we must not just take things for granted just by looking at the positives that the thing brings.
With lazy loading, we learnt that it can significantly boost our apps start up time by having the user to download less javascript initially but what we must keep in mind is that even though less Javascript is loaded initially, we do need to download that part later.
What happens by default is that all the code is downloaded by the user’s browser initially and therefore he does not need to download any more code after that. Therefore, all the other pages are loaded very fast. But once we use lazy loading, we would need to download the code for the component being lazy loaded at least once and what that means is that even though we did decrease the initial start up time of the application, we are taking a little more time each time we load a new page that is actually lazy loaded.
Another con for lazy loading is that it actually hits the performance negatively if we lazy load components less than 30 KB in size. So what happens in lazy loading is that each component has it’s own bundle of code created. Hence, if a component’s bundle is less than 30KBs in size, we might actually do more harm than good by code splitting.
The third con is using third party libraries that are large in size, say lodash or momentjs. If we are loading them into our component and then lazily loading the component, the third party library also gets loaded, therefore increasing the bundle size for that lazily loaded component. What would have happened otherwise was these libraries would’ve been loaded just once in the beginning and bundled into the single bundle.js
Even with these issues, I think lazy loading is a great technique which can improve the performance of your application significantly if used properly and therefore in the next section we’ll see how easy it is to do so with the latest React version.
Implementing lazy loading of components in React
example of lazy loading components in react
example lazy loading components in react
The main thing to notice in this snippet of code is the use of two things -> lazy and Suspense, both provided to us by the react library.
The next thing to notice is how we use both these things to achieve lazy loading of components in our application. Just look at the declaration of Details component. It is not just imported into the file like the other component of SearchParams. We have instead used the lazy function to import Details dynamically.
Just this. This is how you lazy load components. In the code example above, SearchParams is eager loaded while Details component is lazy loaded, i.e, as we discussed – the code for Details component will only be loaded when it’s route is hit in the browser.
Another thing that we have done is wrap our with . The Suspense takes in a prop of fallback which has to be JSX or HTML and it will then render this suspense whenever the browser is lazily downloading the code for any of the other bundles. The Suspense is a great place for you to display your application’s loader actually.
The great thing about using lazy and Suspense is that they work with any bundler you might be using – Parcel, webpack or Rollup.
Just keep in mind that this feature is only available for React 16.6 + , if you want to implement code splitting in older versions you should look into libraries like loadable.
When to lazy load your components ?
Because there is a trade-off between pros and cons when it comes to lazy loading components in React, we need to be careful when and when not to lazy load our components so as to maintain high performance of your application.
These are the few points that will help you decide when and which components should you be looking to lazy load for your application :-
Try to keep the size of each bundle at 100-150KBs.
Do not lazy load if a component bundle is less than 30KBs.
Do not lazy load if the component is using a large library like lodash.
Do not lazy load the initial component itself.
So these are some of the gotchas that I personally feel where lazy loading would do more harm than profit. Other than this, you can pretty much lazy load any component you would like to and get the benefits of a significantly decreased startup time.
If you want to look at more interesting React articles then please take a look here -> https://easyontheweb.com/category/react/
Top comments (0)