How to create a lazy loaded component in React?

Question

How to create a lazy loaded component in React?

Answer

Lazy loading lets you split your React app into smaller bundles and load components only when required — improving performance.

React provides React.lazy() and Suspense for this.

import React, { Suspense } from 'react';

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

function App() {
  return (
    <div>
      <h2>Dashboard</h2>
      <Suspense fallback={<p>Loading profile...</p>}>
        <Profile />
      </Suspense>
    </div>
  );
}

Here’s what’s happening:

• React.lazy() dynamically imports Profile
• Suspense displays a fallback UI while the component is loading

Real-World Example

Useful for loading:

• Modals or charts only when opened
• Admin dashboards with heavy data
• Code splitting large feature pages

Quick Practice

Create a Chart component that’s lazily loaded only when a user clicks “View Analytics.”

Summary

Use React.lazy with Suspense to load components dynamically and boost performance.