How to Lazy Load your React Components

At bene : studio we love knowledge sharing to help the community of professionals. With 10+ years and over 100 projects behind us, we have a vast amount of experience. This is why we have launched a knowledge base on our blog with regular updates of tutorials, best practices, and open source solutions.

These materials come from our internal workshops with our team of developers and engineers.

What is lazy loading and why would you use it?

Lazy loading is the technique used in optimizing your web and mobile apps, this works by rendering only needed or critical user interface items first, then quietly rendering the non-critical items later.

As we build code components the application grows, and the bundle gets very cumbersome in size. This can quickly make using the application very hard and especially slow, which has many disadvantages, like long load times and bad user experience. Lazy loading is a way to avoid all this and has many other advantages.

There are a couple of benefits:

• Faster initial load time
• Saving bandwidth/data traffic 
• Saving system resources both on the client and server-side

In practice, delivering content (images, scripts, content) when requested, means that your application will have a better user experience from the faster operation and load times and your users will love it!

If SEO is important to you, being fast and lightweight also helps, as Google scores your website based on its speed as well as how much time your users spend on it. 

For SEO use cases there are some rules!

Do:

• Delay loading of images, videos, scripts that are not essential, and/or are below the fold.

Don’t:

• Do not delay loading content that you want Google to crawl, like important text, keywords
• Do not apply lazy load on above the fold content, it may even slow your site down, and this is the place where users want to see everything right away

There is also a lesser-known use-case of lazy loading: spam prevention. Let’s say you have a form on your website for users to apply for something and you notice that suddenly hundreds of spammy form applications come in. Of course, you can use captcha and other methods, but why not lazy load the form on user interactions? Robots who spam are not likely to perform user actions, but look at the code and do their work. If you load your form when requested, you end up with a faster website and less spam.

React.Lazy() and code splitting

In React, lazy() is a function that lets you load components lazily through what is called code splitting without help from any external libraries. 

Before we talk about code splitting, let us understand why it is needed by briefly explaining what a bundle is, with the advent of ES modules, and tools like babel and webpack, writing modular codes in javascript is now possible. These bundlers are importing each module and merging it into what we can call a “bundle”. The bundle is then included in the webpage to load the web app. The larger your project, the larger the bundle and the slower your application when the bundle becomes too large.

Hence, the need for code splitting, code splitting is the process of dynamically splitting the bundle (mentioned above) into multiple bundles and this will be loaded dynamically on a need basis. This will fix the possible performance issues and you would not be losing any needed code in your application.

React.lazy() makes it possible for us to dynamically import components but they are rendered like regular components. This means that the bundle containing the component will only be loaded when the component is rendered.

React.lazy() takes a function that returns a promise as it’s argument, the function returns a promise by calling import() to load the content. The returned Promise resolves to a module with a default containing the React Component.

The component above that we are lazy loading should then be wrapped with the React.Suspense component, this way we can have a fallback content (such as a loading indicator) while we are waiting for the dom to be painted with the lazy loaded component.

Suspense

React.Suspense is a component that can be used to wrap lazy components. A React.Suspense takes a fallback prop that can be any react element, it renders this prop as a placeholder to deliver a smooth experience and also give user feedback while the lazy component is being loaded.

The Fallback prop can be a div, a component or any react element you want rendered while waiting for the component to load.

Let’s briefly look at lazy loading routes.

Lazy Loading Routes

With all that has been explained, we can bring it all together and describe route-based code-splitting, React.lazy() and Suspense makes this possible without third-party packages. All that needs to be done is a conversion of route components to lazy components and then wrap them with a React.Suspense.

The following code snippet shows route-based code-splitting.

Putting it all together, we can see it in a real example like this:

Next time you are building an application, consider lazy loading your components and routes.

Did you like this? Join us!

Want to ask some questions? Share them with us via e-mail to partner@benestudio.co and we can set up a talk with our engineers.

Fancy working for the studio where you can work on international projects and write articles like this? Check out our open positions!

Looking for a partner for your next project? Check out our services page to see what we do and let’s set up a free consultation.