How to Use Code Splitting in React for Faster Loading

Use React.lazy to load components dynamically and wrap them with Suspense to show a fallback UI while loading. This splits your code into smaller chunks that load only when needed, improving app speed.

Syntax

Use React.lazy(() => import('./Component')) to load a component only when it is needed. Wrap the lazy component inside <Suspense fallback=<div>Loading...</div>> to show a loading message while the component loads.

• React.lazy: Defines a component to load on demand.
• import(): Dynamic import that returns a promise.
• Suspense: Handles the loading state with a fallback UI.

jsx

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

Output

Displays 'Loading...' briefly, then renders LazyComponent content.

Example

This example shows a button that loads a heavy component only when clicked, using code splitting to reduce initial load time.

jsx

import React, { Suspense, useState } from 'react';

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(true)}>Load Heavy Component</button>
      <Suspense fallback={<div>Loading component...</div>}>
        {show && <HeavyComponent />}
      </Suspense>
    </div>
  );
}

export default App;

// HeavyComponent.js
// export default function HeavyComponent() {
//   return <div>This is a heavy component loaded on demand.</div>;
// }

Output

Initially shows a button. When clicked, shows 'Loading component...' then displays 'This is a heavy component loaded on demand.'

Common Pitfalls

• Not wrapping lazy components in Suspense causes errors.
• Using React.lazy only works for default exports.
• Loading too many small chunks can hurt performance.
• Not handling loading or error states can confuse users.

jsx

/* Wrong: Missing Suspense wrapper */
import React from 'react';
const LazyComp = React.lazy(() => import('./Comp'));

function App() {
  return <LazyComp />; // This will throw an error
}

/* Right: Wrap with Suspense */
import React, { Suspense } from 'react';
const LazyComp = React.lazy(() => import('./Comp'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComp />
    </Suspense>
  );
}

Quick Reference

Remember these key points for code splitting in React:

• Use React.lazy for dynamic imports of default-exported components.
• Always wrap lazy components with Suspense and provide a fallback UI.
• Use code splitting to improve initial load time by loading components only when needed.
• Handle loading and error states gracefully for better user experience.

Key Takeaways

Use React.lazy with Suspense to load components only when needed.

Always wrap lazy-loaded components in Suspense with a fallback UI.

React.lazy supports only default exports for dynamic imports.

Code splitting improves app speed by reducing initial bundle size.

Handle loading states to keep users informed during component load.