Q269- What is lazy loading in react?

Lazy loading in React means loading a component only when it is needed, instead of loading everything at once during the initial page load.

This helps:

• reduce bundle size
• improve initial load time
• speed up performance
• load heavy components only when required

---

✅ How lazy loading works in React

React provides two main tools:

1. React.lazy()

Used to dynamically import components.

2. <Suspense>

Used to show a fallback UI (loader/spinner) while the component loads.

---

🧪 Example: Lazy Loading a Component

Before (Normal Import)

import About from "./About";

After (Lazy Loaded)

const About = React.lazy(() => import("./About"));

Use inside component:

<Suspense fallback={<h3>Loading...</h3>}>
  <About />
</Suspense>

✔ React downloads About.js only when this component is rendered
✔ Improves performance of the initial load

---

🔥 Real Use Cases of Lazy Loading

✔ 1. Route-based code splitting

Load pages only when user navigates.

const Home = React.lazy(() => import("./pages/Home"));

✔ 2. Heavy components

Charts, maps, editors, or dashboards.

✔ 3. Admin panels or rarely visited routes

✔ 4. Modal components loaded only when opened

---

⭐ Benefits of Lazy Loading

• Faster initial render
• Reduced bundle size
• Better performance on slow networks
• User downloads only what they need

---

🎯 Short Interview Answer

Lazy loading in React means loading components only when they are needed using React.lazy() and Suspense.
It improves performance by reducing the initial bundle size and speeding up initial page load.