Code Splitting with React.lazy and Suspense

Snippet

Code Splitting with React.lazy and Suspense

React.lazy lets you define a component that is loaded dynamically. This helps reduce the initial bundle size by delaying the loading of code that isn't immediately necessary. Suspense provides a loading state while waiting for the component to load.

snippet.js
javascript
import { lazy, Suspense } from 'react';
 
const HeavyComponent = lazy(() => import('./HeavyComponent'));
 
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

react

Breakdown

lazy(() => import('./HeavyComponent'))

Uses dynamic import() to fetch the component file only when it is rendered.

Specifies the UI to show while the lazy-loaded component is being fetched.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Code Splitting with React.lazy and Suspense

Related