Lazy Loading

🔍 What Is It?

React.lazy(() => import('./Component')) creates a lazy component that is only loaded when React first tries to render it.

<Suspense fallback={<Spinner />}> wraps lazy components and shows the fallback UI while the chunk is loading.

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

function App() {
  return (
    <Suspense fallback={<PageSpinner />}>
      <AdminPanel />
    </Suspense>
  );
}

The AdminPanel code is not included in the initial bundle. It downloads as a separate chunk only when a user navigates to a route that renders it.

🎯 Why Do We Need It?

A typical React app without code splitting ships one large JavaScript bundle. Every page's code is included even if the user never visits that page. For an app with 30 routes:

• →Without lazy loading: user downloads code for all 30 pages on first load
• →With lazy loading: user downloads only the code for the current page; other pages load on demand

This directly improves:

• →Time to Interactive (TTI) — the app becomes usable faster
• →Core Web Vitals — Google ranking signals
• →User experience — especially on slow mobile connections

🏗️ What Happens in Real Projects?

In a large enterprise app:

• →Lazy load all page-level route components (most impactful)
• →Lazy load heavy third-party components: rich text editors, chart libraries, PDF viewers
• →Lazy load admin sections that most users never access
• →Lazy load modal content that is rarely opened

⚙️ How It Works

Bundlers (Vite, Webpack) recognise dynamic import() calls as split points. When you write React.lazy(() => import('./AdminPanel')), the bundler:

1. Creates a separate chunk file for AdminPanel and its dependencies
2. Generates a manifest mapping the chunk to the component
3. At runtime, when React tries to render the lazy component, it loads the chunk via a script tag
4. Suspense shows the fallback until the chunk is loaded and the component is ready

💻 Example

Route-Based Code Splitting — Lazy loading all page components with Suspense boundaries.

import { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

// Each import() creates a separate bundle chunk
const DashboardPage  = lazy(() => import('./pages/DashboardPage'));
const ClaimsPage     = lazy(() => import('./pages/ClaimsPage'));
const ClaimDetail    = lazy(() => import('./pages/ClaimDetailPage'));
const ReportsPage    = lazy(() => import('./pages/ReportsPage'));
const AdminPanel     = lazy(() => import('./pages/AdminPanel'));   // large chunk
const RichTextEditor = lazy(() => import('./components/Editor'));  // heavy library

// Named chunks for better debugging
const AnalyticsDashboard = lazy(
  () => import(/* webpackChunkName: "analytics" */ './pages/AnalyticsDashboard')
);

export function AppRoutes() {
  return (
    // Single Suspense at route level
    <Suspense fallback={<PageSpinner />}>
      <Routes>
        <Route path="/dashboard" element={<DashboardPage />} />
        <Route path="/claims" element={<ClaimsPage />} />
        <Route path="/claims/:id" element={<ClaimDetail />} />
        <Route path="/reports" element={<ReportsPage />} />
        <Route path="/admin" element={<AdminPanel />} />
      </Routes>
    </Suspense>
  );
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits