lazy | Notion

Dynamically import a component only when it’s needed, enabling bundle splitting and faster initial load.

Basic Syntax

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

React.lazy() accepts a function that returns a dynamic import()
Returns a lazy-loaded React component
Must be rendered inside a <Suspense fallback={...}> boundary

Example

import { Suspense, lazy } from 'react';

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

function Dashboard() {
  return (
    <Suspense fallback={<p>Loading chart...</p>}>
      <Chart />
    </Suspense>
  );
}

Use Cases

Large components used conditionally (e.g. modal, chart, rich editor)
Rarely visited routes or admin pages
Avoiding loading entire app bundle on first load

Important Notes

Rule / Limitation	Explanation
❗ Must wrap in `<Suspense>`	Required to handle loading state during import
❗ Works only with default exports	Named exports not supported
✅ Supported in Client Components only	Not supported in Server Components (RSC)

Best Practices

Use lazy() only for component-level code splitting
Combine with route-based splitting (e.g. React Router)
Pair with sensible fallback UI (skeleton, spinner, etc.)
Do not lazy load core UI (e.g. navigation, layout)

Basic Syntax

Example

Use Cases

Important Notes

Best Practices

Lazy + Named Exports Workaround