React.lazy() is a function introduced in React 16.6 that lets you render a dynamic import as a regular component.

Instead of importing a component at the top of the file, you defer it until it’s needed.

Example:

import React, { Suspense } from 'react';

// Lazy load the component
const AboutPage = React.lazy(() => import('./AboutPage'));

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

• React.lazy(() => import('./AboutPage')): Tells React to load AboutPage only when it is rendered.
• The component must be wrapped inside a <Suspense> component because lazy loading can take time — so you need a fallback (like a loading spinner) while the code is being fetched.

✅ Key Point: React.lazy makes dynamic imports look and behave like regular components!

---