Careertail
About UsCoursesCareer PathsBlogOpportunities
Log In

Optimizing your React app with React.lazy

Written byMukhammad Sobirov
Published on08 January 2023
Share this piece
CategoryArticle
Optimizing your React app with React.lazy

If you’re looking for a way to optimize your React app, React.lazy is a great instrument to have under your belt. It let’s use reduce the bundle size of your app, by rendering only those components that user needs. This notion is known as “lazy-loading”, in other words, load components just when they’re needed. To better understand the benefits of React.lazy, it's important to have a basic understanding of concepts like "bundling" and "code-splitting.”

Bundling

In simple words “bundling” is when your imported code is merged into a single file to load a whole app at once. Below is a simple example of how bundling works:

 

Here’s what happens after the app is bundled:

That makes sense, right?

Bundling is done on the Webpack level and it’s available out of the box if you’re using CRA, Next.js, and other similar tools.

 

Code Splitting

So bundling definitely helps us, right? However, there’re certain cases to consider. Once your app grows, your bundle size will grow too. Especially when we’re using third-party libraries. That is where code-splitting comes into play. Code-splitting is the process of creating multiple bundles which are dynamically loaded at runtime. With code splitting, you can be sure that only the code needed by the user at the exact time is loaded into the app. Conditional rendering is quite a good use case in this scenario. Let’s examine the following code snippet:

Now, I know that example is probably oversimplified, but let’s imagine Component1 and Component2 carry heavy business logic and there’s a lot of code in them. Based on the condition we can say that we only use one of these components at any given time, but since we’re importing both of them during the initial page load, we’re making inefficient use of resources and increasing bundle size more than needed. This is not good, it means that users might experience loading issues and feel that app is slow.

 

Finally Code-splitting with React.lazy

React.lazy helps you render components dynamically by using dynamic imports. It will automatically load the right bundle needed when the page first loads.

React.lazy accepts a function as a parameter with a dynamic import in it and returns a Promise containing a resolved module with React default export component. Since the process is asynchronous, the “lazy-loaded” components should be wrapped in a Suspense component that can be used to indicate that module is loading. Here’s the previous use case with React.lazy:

fallback prop in Suspense accepts any React component that can be rendered while loading the lazy component, I usually add skeleton animations.

There’re many more and far better use cases for React.lazy, for example, route-based code splitting. Definitely make sure to check the official documentation.

In this article, we delved into the concepts of bundling and code-splitting and how they relate to optimizing a React app. We also explored the use of React.lazy for lazy-loading components and improving the initial load time of a React app. By understanding these concepts and implementing React.lazy in your own projects, you can take steps to improve the performance of your React app and provide a better user experience. I hope that this article was helpful in your journey to optimize your React app.

Find the best online courses for free on our website. We will help you to choose the right career path in the IT field.

Make the most out of your online education
Careertail
Copyright © 2021 Careertail.
All rights reserved
Quick Links
Get StartedLog InAbout UsCourses
Company
BlogContactsPrivacy PolicyCookie PolicyTerms and Conditions
Stay up to date
Trustpilot
Careertail

Optimizing your React app with React.lazy

Written byMukhammad Sobirov
Published on08 January 2023
Share this piece
CategoryArticle
Optimizing your React app with React.lazy

If you’re looking for a way to optimize your React app, React.lazy is a great instrument to have under your belt. It let’s use reduce the bundle size of your app, by rendering only those components that user needs. This notion is known as “lazy-loading”, in other words, load components just when they’re needed. To better understand the benefits of React.lazy, it's important to have a basic understanding of concepts like "bundling" and "code-splitting.”

Bundling

In simple words “bundling” is when your imported code is merged into a single file to load a whole app at once. Below is a simple example of how bundling works:

 

Here’s what happens after the app is bundled:

That makes sense, right?

Bundling is done on the Webpack level and it’s available out of the box if you’re using CRA, Next.js, and other similar tools.

 

Code Splitting

So bundling definitely helps us, right? However, there’re certain cases to consider. Once your app grows, your bundle size will grow too. Especially when we’re using third-party libraries. That is where code-splitting comes into play. Code-splitting is the process of creating multiple bundles which are dynamically loaded at runtime. With code splitting, you can be sure that only the code needed by the user at the exact time is loaded into the app. Conditional rendering is quite a good use case in this scenario. Let’s examine the following code snippet:

Now, I know that example is probably oversimplified, but let’s imagine Component1 and Component2 carry heavy business logic and there’s a lot of code in them. Based on the condition we can say that we only use one of these components at any given time, but since we’re importing both of them during the initial page load, we’re making inefficient use of resources and increasing bundle size more than needed. This is not good, it means that users might experience loading issues and feel that app is slow.

 

Finally Code-splitting with React.lazy

React.lazy helps you render components dynamically by using dynamic imports. It will automatically load the right bundle needed when the page first loads.

React.lazy accepts a function as a parameter with a dynamic import in it and returns a Promise containing a resolved module with React default export component. Since the process is asynchronous, the “lazy-loaded” components should be wrapped in a Suspense component that can be used to indicate that module is loading. Here’s the previous use case with React.lazy:

fallback prop in Suspense accepts any React component that can be rendered while loading the lazy component, I usually add skeleton animations.

There’re many more and far better use cases for React.lazy, for example, route-based code splitting. Definitely make sure to check the official documentation.

In this article, we delved into the concepts of bundling and code-splitting and how they relate to optimizing a React app. We also explored the use of React.lazy for lazy-loading components and improving the initial load time of a React app. By understanding these concepts and implementing React.lazy in your own projects, you can take steps to improve the performance of your React app and provide a better user experience. I hope that this article was helpful in your journey to optimize your React app.

Find the best online courses for free on our website. We will help you to choose the right career path in the IT field.

Make the most out of your online education
Careertail
Copyright © 2021 Careertail.
All rights reserved
Quick Links
Get StartedLog InAbout UsCourses
Company
BlogContactsPrivacy PolicyCookie PolicyTerms and Conditions
Stay up to date
Trustpilot