How to Use React.lazy for Lazy Loading Components

Use React.lazy to load components only when they are needed by wrapping the import in React.lazy(() => import('...')). Then render the lazy component inside a Suspense component with a fallback UI to handle loading states.

Syntax

React.lazy takes a function that returns a dynamic import of a component. This tells React to load the component only when it is rendered. You must wrap the lazy component inside React.Suspense to show a fallback UI while loading.

• React.lazy(() => import('./MyComponent')): Lazy loads MyComponent.
• <Suspense fallback="<Loading />">: Shows fallback UI during loading.
• <MyComponent />: The lazy loaded component.

jsx

import React, { Suspense } from 'react';

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

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

export default App;

Output

Displays 'Loading...' while MyComponent loads, then renders MyComponent content.

Example

This example shows how to lazily load a component named Greeting. While loading, it displays a simple loading message. Once loaded, it shows the greeting text.

jsx

import React, { Suspense } from 'react';

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

function App() {
  return (
    <div>
      <h1>Welcome to the app</h1>
      <Suspense fallback={<div>Loading greeting...</div>}>
        <Greeting />
      </Suspense>
    </div>
  );
}

export default App;

// Greeting.js
// export default function Greeting() {
//   return <p>Hello, friend!</p>;
// }

Output

Welcome to the app
Loading greeting... (briefly)
Hello, friend!

Common Pitfalls

• Not wrapping lazy components in Suspense causes errors.
• Using React.lazy only works with default exports.
• Trying to lazy load non-component modules will fail.
• Fallback UI should be simple and quick to render to avoid blocking.

jsx

/* Wrong: Missing Suspense wrapper */
const LazyComp = React.lazy(() => import('./Comp'));

function App() {
  return <LazyComp />; // Error: Suspense is required
}

/* Right: Wrap with Suspense */
import React, { Suspense } from 'react';

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

Quick Reference

React.lazy Cheat Sheet:

Concept	Description
React.lazy(() => import('./Comp'))	Lazy loads a component dynamically.
} />	Wraps lazy components to show fallback UI while loading.
Default export required	Lazy loaded components must be default exports.
Use for code splitting	Improves performance by loading code only when needed.

Key Takeaways

Always wrap lazy loaded components inside React.Suspense with a fallback UI.

React.lazy works only with default exported components.

Use React.lazy to split code and improve app loading speed.

Fallback UI should be simple to avoid blocking rendering.

Do not lazy load non-component modules with React.lazy.