Lazy Loading in React
Tags: react, designpatterns, javascript, webdev
Published: 2023-11-18 17:33:20

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.

```jsx
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.

```jsx
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:**
   ```jsx
   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.

2. **Using `Suspense` Component:**
   ```jsx
   <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.

3. **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](https://www.linkedin.com/in/kurmivivek295/)