Monk’s Web React Series #3: Why I Stopped Loading Every Page Upfront

I noticed something strange in one of our React applications. The initial page load felt slow. Users were only visiting one or two pages, but the browser was downloading code for many pages they never opened. We were loading everything upfront.

— — — — — — — — — — — — — — — — — — —

What was happening? By default, React imports load immediately.

import Dashboard from "./Dashboard";
import Reports from "./Reports";
import Settings from "./Settings";

Even if the user is currently viewing only the Dashboard page, the code for Reports and Settings is also included in the initial bundle. As the application grows, the bundle grows too. More code means longer loading times.

— — — — — — — — — — — — — — — — — — —

The Fix I started lazy loading of pages and wrapped them with Suspense. Both lazy and Suspense are built-in features provided by React library.

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

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

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/reports" element={<Reports />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

Now, when users open the application, only the Dashboard code is downloaded initially. The Reports and Settings pages are downloaded only when users navigate to those routes. The initial bundle becomes smaller, and the application loads faster.

— — — — — — — — — — — — — — — — — — —

How does it help? Instead of downloading everything at once, The browser downloads only what is needed. Then loads other pages only when users navigate to them.

— — — — — — — — — — — — — — — — — — —

One rule to remember If a page, modal, or large component is not needed immediately, lazy load it. “Lazy loading isn’t about loading faster. It’s about loading less and loading only what’s needed.”