Lazy Loading in React

Lazy loading is a technique in React where you delay the loading of a component or module until it's actually needed. This can improve the initial loading performance of your application by loading only the necessary code for the current view.

Let's go through an example of lazy loading a component using React's React.lazy function and the Suspense component.

Step 1: Problem Code

In larger React applications, loading all components and modules upfront can result in a slower initial page load. Users may have to wait for unnecessary code to download even if they don't interact with certain parts of the application.

Consider a scenario where you have a large application, and you're importing a component that is not needed on the initial page load.

import React from 'react';
import BigComponent from './BigComponent';

const App = () => {
  // Some other code...

  return (
    <div>
      {/* Unnecessarily loading BigComponent upfront */}
      <BigComponent />
    </div>
  );
};

In this code, BigComponent is loaded upfront, even if the user might not interact with it immediately.

Step 2: Solution - Lazy Loading

Lazy loading allows you to load specific components or modules only when they are required, reducing the initial bundle size and improving the performance.

Let's use lazy loading to load BigComponent only when it's actually needed.

import React, { lazy, Suspense } from 'react';

// Lazy-loaded component using React.lazy
const BigComponent = lazy(() => import('./BigComponent'));

const App = () => {
  // Some other code...

  return (
    <div>
      {/* Lazy loading BigComponent */}
      <Suspense fallback={<div>Loading...</div>}>
        <BigComponent />
      </Suspense>
    </div>
  );
};

Step-by-Step Explanation:

1. Lazy Loading Setup:

   const BigComponent = lazy(() => import('./BigComponent'));

Use React.lazy to create a lazy-loaded version of the component. The argument to import is a function that returns a dynamic import statement.

1. Using Suspense Component:

   <Suspense fallback={<div>Loading...</div>}>
     <BigComponent />
   </Suspense>

Wrap the lazy-loaded component with the Suspense component. The fallback prop defines what to render while the lazy component is loading.

1. Result:
   • On the initial page load, only the necessary code is loaded.
   • If BigComponent is needed, it will be loaded asynchronously, and the loading fallback will be displayed during the loading process.

Lazy loading helps optimize the initial load time of your application by deferring the loading of certain components until they are required. This can lead to a better user experience, especially in applications with large codebases.

"Your feedback and ideas are invaluable – drop a comment, and let's make this even better!"

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: Linkedin Profile