What is lazy loading of components?

ReactJunior~2 min read

What is Lazy Loading

Lazy loading is deferred loading of components or modules. Instead of loading the entire application at startup, React loads only the parts that are actually needed right now.

The rest of the components are loaded on demand.

Example: without lazy loading

javascript

import HeavyChart from './HeavyChart';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <HeavyChart />  {/* loaded right away, even if not visible */}
    </div>
  );
}

Even if the HeavyChart component is shown rarely, it still gets loaded right away together with the whole bundle. If there are many such components, page load time grows.

With lazy loading

javascript

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

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

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>

      <Suspense fallback={<div>Loading chart...</div>}>
        <HeavyChart />  {/* loads only once React reaches it */}
      </Suspense>
    </div>
  );
}

Now HeavyChart loads only on its first render, once React actually reaches it in the component tree.

How this works "under the hood"

React uses dynamic import (import()) together with code splitting. At build time (Webpack / Vite / Next.js), separate "chunks" (JS files) are created.

javascript

bundle.js → is split into:
- main.js (the core code)
- HeavyChart.chunk.js (the heavy component)
- Settings.chunk.js

When the user opens a page containing HeavyChart, the browser makes an extra request:

javascript

GET /static/js/HeavyChart.chunk.js

and only then loads the component's code.

The `Suspense` component

While React is loading a lazy component, it temporarily shows a placeholder specified in fallback.

javascript

<Suspense fallback={<Spinner />}>
  <HeavyChart />
</Suspense>

Once loading finishes, React automatically replaces Spinner with the component.

Example with routing

Without lazy loading:

javascript

import Home from './pages/Home';
import Dashboard from './pages/Dashboard';
import Settings from './pages/Settings';

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="/settings" element={<Settings />} />
</Routes>

All pages load in one big bundle.

With lazy loading:

javascript

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

<Routes>
  <Route
    path="/"
    element={
      <Suspense fallback={<Spinner />}>
        <Home />
      </Suspense>
    }
  />
  <Route
    path="/dashboard"
    element={
      <Suspense fallback={<Spinner />}>
        <Dashboard />
      </Suspense>
    }
  />
  <Route
    path="/settings"
    element={
      <Suspense fallback={<Spinner />}>
        <Settings />
      </Suspense>
    }
  />
</Routes>

Now each page loads as a separate JS file, only on the first navigation to it.

When this is especially useful

Lazy loading gives the biggest payoff:

In an SPA with many pages (Dashboard, Settings, Profile, Reports, etc.);
For heavy dependencies (charts, editors, maps, tables);
For modals and dynamic widgets that appear rarely;
For admin panels, where only some pages are used often.

How to combine it with other optimizations

Technique	What it does
React.lazy() + Suspense	Deferred loading of components
Dynamic import()	Dynamic module imports without React
Code splitting in the Router	Loads pages "per route"
Preload/Prefetch	Loads needed chunks ahead of time
SSR + lazy	Client-side parts can be loaded after hydration

Lazy loading is not just for components

You can lazily load:

components (React.lazy);
hooks and utilities (import() at the moment of use);
images (loading="lazy");
CSS modules (import('./styles.css') inside components);
data (fetch when a section is first opened).

Summary

What it does	Why
Loads a component only on its first use	Reduces the initial bundle size
Splits code into chunks	Faster page load and render
Works with `React.lazy()` and `Suspense`	Controls display and fallbacks
Saves memory and traffic	Loading "on demand" instead of "all at once"

A simple formula:

"Don't load what the user isn't seeing yet."

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.