Lazy Loading

Introduction

By default, a bundler like Vite or webpack packages your entire application — every page, every component — into one big JavaScript file that the browser must download before anything can render. As an app grows, that single bundle grows too, slowing down the very first page load even for users who will only ever visit one page.

Lazy loading fixes this by splitting the app into smaller chunks and downloading each chunk only when it is actually needed. This lesson covers React.lazy(), the <Suspense> component that shows a loading state while a chunk downloads, and how to combine both with React Router so each page becomes its own separate bundle.

What is Lazy Loading?

Lazy loading means delaying the download of a piece of code until the moment it is actually needed, instead of bundling everything upfront. For example, the code for a rarely-visited "Settings" page does not need to be downloaded by every visitor the instant they land on the home page — it can wait until they actually navigate there.

React.lazy()

React.lazy() takes a function that calls a dynamic import() and returns a special component. React does not download that component's code until the very first time it is rendered — the dynamic import() is what tells the bundler to split that file into its own chunk.

import { lazy } from 'react';

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

The <Suspense> Component

While a lazy component's chunk is downloading, React needs something to show on screen. <Suspense> wraps around lazy components and displays its "fallback" prop — usually a spinner or skeleton — until the download finishes, then swaps in the real component.

import { lazy, Suspense } from 'react';

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

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

export default App;

Example: Lazy Loading a Component

Imagine a heavy "Chart" component that uses a large charting library. Most users never open the tab that shows it, so lazy loading keeps that big dependency out of the initial bundle entirely.

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

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

function Dashboard() {
  const [showChart, setShowChart] = useState(false);

  return (
    <div>
      <button onClick={() => setShowChart(true)}>Show Chart</button>

      {showChart && (
        <Suspense fallback={<p>Loading chart...</p>}>
          <Chart />
        </Suspense>
      )}
    </div>
  );
}

export default Dashboard;

Button clicked
  -> setShowChart(true)
  -> Chart chunk begins downloading
  -> "Loading chart..." shown briefly
  -> Chart chunk finishes downloading and renders

Lazy Loading Routes

The most common and effective place to use lazy loading is at the route level. Each page in your app becomes its own chunk, so visiting the home page never downloads the code for the settings page, the profile page, or any other route the user has not visited yet.

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

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Settings = lazy(() => import('./pages/Settings'));

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

export default App;

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Lazy loading lets your app grow without forcing every user to download all of it upfront. React.lazy() and <Suspense> work together to split code into chunks and show a graceful loading state while those chunks download on demand.

In this lesson, you learned what lazy loading solves, how React.lazy() and <Suspense> work together, and how to apply this pattern to React Router routes. Next, you will learn how error boundaries prevent a single broken component from crashing your entire app.