Suggest an edit

Improve this article

Refine the answer for “What is lazy loading of components?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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:

1. **In an SPA with many pages** (Dashboard, Settings, Profile, Reports, etc.);
2. For **heavy dependencies** (charts, editors, maps, tables);
3. For **modals** and **dynamic widgets** that appear rarely;
4. 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."

Markdown · drag & drop images · ⌘B / ⌘I shortcuts650 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.