Lazy Loading in React — Load Only What You Need, When You Need It 🚀

Lazy loading helps you optimize performance by loading components only when they’re needed, not upfront. It's perfect for large apps where not everything should be loaded at once.

🧠 Why use lazy loading?
• Reduces initial bundle size
• Improves app speed and performance
• Better user experience on slow networks

📦 React provides React.lazy() and Suspense for lazy loading components.

🔧 Example:
import React, { Suspense } from "react";

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

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

📌 Key points:
• Wrap lazy components in
• Use a fallback UI like a loader or message
• Great for routes, modals, and large UI blocks

Lazy loading helps deliver faster, more efficient React apps without sacrificing features.