Most of the React applications are bundled using tools like Webpack or Browserify. For large-scale applications, bundling all the code increases application load time and memory usage, which results in poor performance. Lazy loading is a technique that improves the performance of an application by loading resources on demand. This helps in reducing the initial bundle size and load time of the application.
Note: To learn about Webpack or Browserify, visit this link.
If the users visit the application, they might not interact with all parts of the application immediately. By lazy loading the components, we can show the users components that are immediately needed, e.g., log-in or other important details right away. The rest of the components can be loaded on demand. This way, we can greatly increase the performance of an application by reducing application load time.
To implement lazy loading in React, we need to follow these steps:
First, create a basic React app and make different components to perform lazy loading. Let’s create three components Main, ShoppingCart, and LogIn:
import React from "react";const ShoppingCart = () => {return (<div><h1>Shopping Cart</h1></div>);};export default ShoppingCart;
lazy() and Suspense In React, we can use the lazy() function in combination with the Suspense component to implement lazy loading. Import them at the top of the App.js file.
import React, { lazy, Suspense } from "react";
lazy() to create lazy componentThen, we can use the lazy() function provided by React to dynamically import a component. The lazy() accepts the function in its input parameter. So, provide a function that returns a dynamic import() statement in the input parameter. This input function will be called when the components is actually rendered.
const ShoppingCart = lazy(() => import("./components/ShoppingCart"));const LogIn = lazy(() => import("./components/LogIn"))
Suspense to render lazy componentWrap the LogIn and ShoppingCart components inside the Suspense component. The Suspense component handles the loading state when the component is being rendered. It takes a fallback prop, in which we can pass the div to be displayed, when the component is lazily loading. Once the component is fully loaded, it will be rendered in place of the fallback.
const App = () => {return (<div>{/* Load LogIn component lazily*/}<Suspense fallback={<div>Loading component...</div>}><LogIn /></Suspense>{/* Load ShoppingCart component lazily*/}<Suspense fallback={<div>Loading component...</div>}><ShoppingCart /></Suspense></div>);};
Here is the code complete code for lazy loading the components. In the code given below, we have three components Main, ShoppingCart, and LogIn. The Main component is loaded normally, while the ShoppingCart and LogIn components are lazy loaded. When we run the application, we will see the Main component instantly rendered on page load, while the ShoppingCart and LogIn components will take some time to render.
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Note: In the SPA widget above, we’re using the
18.2.0version of React.
Free Resources