React - Lazy

About

The lazy function ¹⁾ implements lazy loading. (ie it will let you defer loading component’s code until it is rendered/executed for the first time)

It's part of code splitting meaning that the build step will create an extra module that will be dynamically loaded when the code run

How to use it?

Step 1: Make your component Lazy

Default exports

React.lazy currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default.

Good:

export { MyComponent as default } from "./ManyComponents.js";

Bad:

// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;

Wrap your component with Lazy

Before:

import OtherComponent from './OtherComponent';

After:

const OtherComponent = React.lazy(() => import('./OtherComponent'));

The wrap internally uses the dynamic import statement that triggers code splitting in most bundlers.

Step 2: Make your component Lazy aware

Because your component will be now Lazy loaded, you should wrap it inside a reference/react/Suspense component to add fallback content. It will be used as a loading indicator while the user is waiting for the lazy component to load.

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

Example: Route-based code splitting

With the React Router library

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

¹⁾

reference/react/lazy