Problem
React is a library for building single-page web applications. Therefore by default, it exports a single chunk file with all the pages and their depending libraries resulting in huge single bundle size. Even if the user is only visiting a page with small data in it, the whole package needs to be downloaded as a whole single chunk file. This is not acceptable for a good user experience on our website.
Introducing "React.Lazy". A function that lets you split and load different sections of our React application as requested by the user.
Example Scenario
Let's see how a default react application with two pages is implemented:
In the above example, we are using "react-router-dom" library (version - 6.3.0) for routing and a heavy "moment.js" package inside the "largePage.js" page.
In this case, the component "LargePage" containing the heavy "moment.js" package will be bundled and sent to every user irrespective of whether they are visiting the "Home" page or the "Largepage". This is a waste of network and memory space.
Solution
We will introduce code splitting and lazy loading in order to avoid unnecessary large bundle sizes and loading time. The above "App.js" file can be refactored into the following code:
Here, we have added "lazy" and "Suspense" functions from the "react" library.
Lazy function
The "lazy" function enables the component to be only loaded when the user requests it. Using "lazy" will split the code into separate chunk files, thereby avoiding the huge single bundle size that was delivered to the user in our earlier case. Lazy components will only be sent to the user upon loading a page that uses those components. Once loaded, these components will persist and won't need to be loaded again.
The syntax for "lazy" function is as follows:
import { lazy } from "react";
const LargePage = lazy(() => import("./LargePage"));
The components that are lazily loaded need to be a default export.
Suspense function
The "Suspense" function is for providing a fallback for the lazy-loaded components such as when the component is being loaded. We would need to wrap out lazy-loaded components with the "Suspense" boundary like in our example and pass in a fallback for the loading state.
The syntax for the "Suspense" functions is as follows:
<Suspense fallback={<h1>Loading...</h1>}>
<LazyLoadedComponents> //Wrap every component inside "Suspense".
</Suspense>
Conclusion
It is good practice to use lazy loading on pages with heavy libraries when building big projects. This way, we can reduce the bundle size and improve the performance of our entire application. Users shouldn't need to wait an extensive amount of time to just visit the home page.
Thank you for reading. Check out the featured articles in my blog to see more tutorials in React and several other technologies. See you in the next one.