🚀 What is Lazy Loading?

Lazy loading in React allows you to load components only when they're needed, reducing initial bundle size and improving performance. It splits your code into smaller chunks that load on demand.


// Import component lazily
import { lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

Key Concepts

📦

Code Splitting

Break app into smaller bundles

⚡

Performance

Faster initial page load

🔄

Dynamic Import

Load components on demand

⏳

Suspense

Show fallback while loading

🔹 Basic Lazy Loading

Use React.lazy() to dynamically import components. This creates a separate bundle that loads only when the component is rendered, reducing your initial JavaScript payload.

import React, { lazy, Suspense } from 'react';

// Lazy load the component
const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <h1>My App</h1>
      
      {/* Show fallback while loading */}
      <Suspense fallback={<div>Loading...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

Output:

My App

Loading... (then component appears)

🔹 Route-Based Lazy Loading

Lazy load entire pages or routes to split your application by pages. Each route becomes a separate bundle, perfect for large applications with many pages.

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

// Lazy load pages
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading page...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Result:

Each route loads only when visited, reducing initial bundle size.

🔹 Conditional Lazy Loading

Load components based on user actions or conditions. This is useful for modals, tabs, or features that users might not access during every session.

import { lazy, Suspense, useState } from 'react';

const Modal = lazy(() => import('./Modal'));

function App() {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <button onClick={() => setShowModal(true)}>
        Open Modal
      </button>

      {showModal && (
        <Suspense fallback={<div>Loading modal...</div>}>
          <Modal onClose={() => setShowModal(false)} />
        </Suspense>
      )}
    </div>
  );
}

Behavior:

Modal code loads only when button is clicked, not on initial page load.

🔹 Custom Loading Component

Create a reusable loading component for better user experience:

import { lazy, Suspense } from 'react';

// Custom loading component
function LoadingSpinner() {
  return (
    <div style={{ textAlign: 'center', padding: '20px' }}>
      <div className="spinner"></div>
      <p>Loading component...</p>
    </div>
  );
}

const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Dashboard />
    </Suspense>
  );
}

React Lazy Loading