What is lazy loading in React?

Lazy loading is a design pattern where resources (like components) are loaded only when

they are needed (e.g., when they enter the viewport or the user navigates to the route).

In React, lazy loading is typically implemented using React.lazy and Suspense.

Example:

import { Suspense } from 'react';

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

function App() {

return (

<Suspense fallback={<div>Loading...</div>}>

<HeavyComponent />

</Suspense>

);

}

This ensures that the heavy component is only loaded when the app actually needs it.