Code Splitting with React.lazy and Suspense

Snippet

Code Splitting with React.lazy and Suspense

React.lazy enables you to load components dynamically using the dynamic import() syntax. Combined with Suspense, it allows you to defer loading heavy components until they are actually needed, significantly reducing initial load times.

snippet.js
javascript
const AnalyticsChart = React.lazy(() => import('./AnalyticsChart'));
 
function Dashboard() {
  return (
    <div>
      <h1>System Status</h1>
      <React.Suspense fallback={<p>Loading chart...</p>}>
        <AnalyticsChart />
      </React.Suspense>
    </div>
  );
}

react

Breakdown

React.lazy(() => import('./AnalyticsChart'))

Defines a component that will be fetched automatically via a separate network request when it first renders.

<React.Suspense fallback={...}>

A wrapper that provides a loading UI (fallback) while the lazy-loaded component is being downloaded.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Code Splitting with React.lazy and Suspense

Related