Snippet

Code Splitting Components with React.lazy and Suspense

React.lazy enables dynamic, asynchronous loading of component bundles on demand. Wrapping lazy components with Suspense lets you define a fallback placeholder, reducing initial bundle size and improving web page loading performance.

snippet.js

javascript

import React, { Suspense, lazy } from 'react';
 
const AnalyticsDashboard = lazy(() => import('./AnalyticsDashboard'));
 
function App() {
  return (
    <div>
      <h1>Admin Area</h1>
      <Suspense fallback={<p>Loading dashboard bundle...</p>}>
        <AnalyticsDashboard />
      </Suspense>
    </div>
  );
}

react

Breakdown

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

Dynamically imports the component chunk asynchronously when it is first needed.

<Suspense fallback={<p>Loading dashboard bundle...</p>}>

Specifies a temporary fallback JSX element to display while the dynamic bundle is downloading.

Renders the deferred component once the module has finished loading.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Code Splitting Components with React.lazy and Suspense

Related