React › Suspense & Concurrent Rendering

How does Suspense work together with React.lazy to handle loading a component's code?

Intermediate

Answer

React.lazy marks a component to be loaded only when it is actually needed, and Suspense provides the fallback content to show while that component's code is still downloading in the background. Together they let you split your app into smaller pieces without manually managing loading states for each one.

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

function App() {
  return (
    <Suspense fallback={<p>Loading settings</p>}>
      <Settings />
    </Suspense>
  );
}

Real-world example An admin panel shows a brief loading message the very first time a user opens the rarely visited settings page, since that page's code is only downloaded at that exact moment, thanks to React.lazy and Suspense working together.

Common follow-ups: What happens if the lazy loaded component's code fails to download due to a network error?;Does Suspense only work with React.lazy, or can it be used for other kinds of loading too?

Code Splitting & Lazy Loading;Error Boundaries