How do Suspense and React.lazy work for code splitting?

A dynamic import tells the bundler to put a module in a separate chunk. React.lazy wraps that import so React can treat it as a component that is not ready yet. While the promise is pending, React unwinds to the nearest Suspense boundary and renders its fallback.

const SettingsPage = React.lazy(() => import("./SettingsPage"));

function App() {
  return (
    <Suspense fallback={<PageSkeleton />}>
      <SettingsPage />
    </Suspense>
  );
}

Where Suspense helps

• Route-level splitting so the initial bundle stays small
• Heavy widgets, editors or charts that are not needed immediately
• Data that a framework can suspend on, not only component code
• Keeping a meaningful fallback visible during a slow load

The lazy import should be declared at module scope. Calling lazy inside a component creates a new component type on every render, which can remount the subtree and make the fallback flicker. Prefetch the chunk on hover or navigation intent when the route is likely to be used.