Code Splitting with React.lazy and Suspense

Snippet

Code Splitting with React.lazy and Suspense

React.lazy allows you to load components dynamically only when they are needed. Combined with Suspense, you can provide a fallback UI while the browser fetches the separate JavaScript chunk, significantly improving initial page load performance.

snippet.js
javascript
import React, { Suspense, lazy } from 'react';
 
const HeavyChart = lazy(() => import('./HeavyChart'));
 
function Dashboard() {
  return (
    <Suspense fallback={<div>Loading chart...</div>}>
      <HeavyChart data={stats} />
    </Suspense>
  );
}

react

Breakdown

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

Creates a component that is loaded via a dynamic import expression.

A wrapper that detects when children are waiting for a dynamic resource and shows the fallback instead.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Code Splitting with React.lazy and Suspense

Related