`lazy`

Defers loading a component until it is first rendered.

Since React 16.6 Spec ↗

Syntax

const Cmp = lazy(load)

Parameters

Name	Type	Required	Description
`load`	`function`	Yes	Function returning a Promise that resolves to a module with a default export component.

Returns

component — A component that suspends while its code chunk loads.

Examples

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

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Settings />
    </Suspense>
  );
}

Notes

The dynamically imported module must expose the component as its default export. Always render a lazy component inside a `<Suspense>` boundary to show a fallback while the chunk downloads. Declare lazy components at module scope, not inside another component.