Lazy Loading in React

What Is Lazy Loading?

Lazy loading in React is a technique that loads a component only when it is needed instead of loading all components at the beginning of the application.

It helps improve application performance by reducing the amount of JavaScript that needs to be loaded initially.

For example, imagine an application with three pages:

• Home
• About
• Dashboard

Without lazy loading, the JavaScript for all three pages might be included in the initial bundle, even if the user visits only the Home page.

With lazy loading, React can load the Home page first and load the About or Dashboard page when the user navigates to it.

Why Do We Use Lazy Loading?

Lazy loading offers several benefits:

1. Improves initial loading speed: The browser downloads less JavaScript when the application first opens.
2. Reduces bundle size: Code can be split into smaller chunks rather than downloading everything at once.
3. Improves user experience: Users can start interacting with the application sooner, especially on slower networks.
4. Loads components when needed: Components that users never visit do not need to be downloaded during the initial load.
5. Supports large applications: It helps manage applications with many pages and features.

How to Implement Lazy Loading in React

React provides two built-in features for lazy loading components:

• React.lazy()
• <Suspense>

Example

Suppose you have a component named Dashboard.jsx.

Step 1: Create the Dashboard component

// Dashboard.jsx

function Dashboard() {
  return <h2>Welcome to the Dashboard!</h2>;
}

export default Dashboard;

Step 2: Use lazy loading in your main component

// App.jsx

import { lazy, Suspense } from "react";

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

function App() {
  return (
    <div>
      <h1>My React Application</h1>

      <Suspense fallback={<p>Loading Dashboard...</p>}>
        <Dashboard />
      </Suspense>
    </div>
  );
}

export default App;

How Does This Code Work?

1. lazy(() => import("./Dashboard"))

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

React loads the Dashboard component's module when the lazy component is first rendered, rather than requiring it as a normal static import.

The dynamic import() allows supported build tools to split the component into a separate JavaScript chunk.

2. <Suspense>

<Suspense fallback={<p>Loading Dashboard...</p>}>
  <Dashboard />
</Suspense>

While the component's code is loading, React displays the fallback UI.

Once the module finishes loading, React displays the Dashboard component.

Important: Lazy loading does not mean that a component loads every time it is rendered. Once its module has loaded, React and the JavaScript module system can reuse it.

Real-World Example: Lazy Loading with React Router

In a large application, you may have multiple pages. Instead of loading every page's code upfront, you can lazy-load each page.

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

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));
const Dashboard = lazy(() => import("./Dashboard"));

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

export default App;

In this example:

• When the user visits /, React loads the Home page's module when needed.
• When the user visits /about, React loads the About page's module when needed.
• When the user visits /dashboard, React loads the Dashboard page's module when needed.

The build tool determines the actual chunk structure, and shared dependencies may be placed in separate chunks.