❮ Previous

Lazy Loading

  • This lesson introduces lazy loading in React and explains how to load components efficiently.

  • Lazy Loading

    React.lazy

    React.lazy loads components lazily.

    Example:

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

  • Component loads only when rendered.

    Suspense Component

    Suspense shows fallback UI while loading.

    Example:

<Suspense fallback={<p>Loading...</p>}>
  <Dashboard />
</Suspense>

  • Improves user experience during loading.

    Real-World Optimization Example

User opens app
↓
Load core components
↓
Lazy load heavy pages (Dashboard, Charts)
↓
Smooth navigation

  • Best Practices

     ✅ Use memoization wisely
     ✅ Avoid premature optimization
     ✅ Optimize only when needed
     ✅ Measure performance using React DevTools
     ✅ Keep components small and focused

    Final Summary 

    • Performance is critical for user experience

    • Avoid unnecessary re-renders

    • Use React.memo for pure components

    • Code splitting reduces bundle size

    • Lazy loading improves initial load time

    Suspense enhances loading UX
❮ Previous