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.
Join our workshops in 2022
Sign up and get notified about upcoming workshops. Build exciting apps and learn about technologies like React Native, JS, Flutter etc. from experienced engineers.
Join the community and invite your peers as well! For updates regarding the upcoming event, visit the workshop page:
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 firstname.lastname@example.org 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
How to become a VSCode power user
In this article, we are going through some of our most commonly used extensions, key bindings, and best practices.
Learn about zero-copy transfer performance compared to structured cloning.
What is the use of context API in React?
Do a deep dive with our article and learn how it compares to Redux.
Using micro-frontends architecture to build more scalable applications
Important points to know before moving from monolithic frontends to micro-frontends.
Static caching based on cloud services
Walkthrough of the most popular Content Delivery Networks: AWS CloudFront, Google Cloud CDN Azure CDN and Cloudfflare CDN.
Let bene : studio enhance
your digital product!