bene : studio is a global consultancy, helping startups, enterprises and HealthTech companies to have better product
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!
- Delay loading of images, videos, scripts that are not essential, and/or are below the fold.
- 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.
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.
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 email@example.com 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.
Read moreSee all open source
Manage translations online with React
In an earlier article we shared that extracting messages is the best way for internationalization in React. But you shouldn’t stop there.
How to Indicate Content Overflow with React Scrollfade
Learn about a component that dynamically fades out the bottom of an HTML element based on the scrollbar's position.
Internationalize your React App with React Intl
What is internationalization (i18n), and why is it important? Learn how to extract messages and generate auto-id.
Is well-formatted code important today?
A set of rules of what make a code beautiful and understandable to other developers.
Let bene : studio enhance
your digital product!