What is lazy loading in React?

Short answer: 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 code

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.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.