React 19+ · Function

lazy

lazy defers loading a component’s code until its first render. Wrap the lazy component, or an ancestor, in Suspense to show fallback content while the module loads.

How it works

Call lazy with a loader that returns a dynamic import. React waits until the returned component is first rendered before invoking that loader, then renders the loaded module’s default export. Because rendering suspends during loading, place the component or an ancestor inside Suspense with a fallback.

Syntax

const SomeComponent = lazy(load)

Parameters

Name	Type	Description
`load`	`() => Promise<{ default: ComponentType }>`	A function returning a Promise or thenable that resolves to a module whose default export is a React component.

Returns

A React component that suspends until the loader resolves and then renders the resolved module's default export.

Key points

Use lazy to postpone downloading a component’s code until the component is actually needed in the rendered tree.
Define the lazy component at module level so its identity remains stable across parent renders.
The loader is demand-driven: React waits for the first render attempt before starting the import.
The imported module must resolve with the component available through its default export.
The return value behaves like a component and can be placed directly in JSX.
Initial rendering pauses while the module is pending, allowing Suspense to control the interim UI.

Common mistakes

Create lazy components at module scope, not inside a component. Defining one during rendering can create a different component identity across renders and cause state to reset.
A failed module load is surfaced to the nearest Error Boundary, so provide error handling in addition to the loading fallback.

Example: Lazy-load a component with Suspense

import { lazy, Suspense } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

export default function App() {
  return (
    <Suspense fallback={<p>Loading preview…</p>}>
      <MarkdownPreview />
    </Suspense>
  );
}

The component module is requested only when MarkdownPreview is first rendered; Suspense supplies the temporary UI while that request is pending.

When to use it

Split route-level code

A route or screen is rarely visited and should not increase the initial JavaScript payload.

Load feature-heavy UI on demand

A large editor, chart, or preview is needed only after the user opens a feature.

Defer conditional sections

A page has below-the-fold or conditional panels that are expensive to download upfront.

Interview questions

QWhat does React.lazy do?

lazy accepts a loader function and returns a React component. React does not invoke the loader until the component is first rendered, then uses the resolved module’s default export.

Follow-up: What UI appears while loading? Rendering suspends, so the lazy component or an ancestor must be covered by Suspense with an appropriate fallback.

QWhat contract must the lazy loader satisfy?

The loader must return a Promise or thenable that eventually resolves to a module containing a valid React component as its default export. A normal dynamic import naturally has that module shape.

Follow-up: How should a named export be adapted? Return a Promise that maps the module to an object whose default property is the named component.

QWhere should lazy components be declared, and how are loading failures handled?

Declare lazy components outside component functions, normally at module scope. React caches both the loader’s Promise and its resolved result, while a rejection is passed to the nearest Error Boundary.

Follow-up: Why combine Suspense with an Error Boundary? Suspense handles the pending state, whereas an Error Boundary handles a rejected module load.

Suspense
Error Boundary
dynamic import

Source: lazy - React. Checked 2026-10-15.