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 →

Code Splitting with React.lazy and Suspense

Related