React Router Lazy Loading Routes

What is Router Lazy Loading Routes in React?

Route-level code splitting loads a page’s JavaScript only when the user navigates to it. React.lazy imports the component dynamically and Suspense shows a fallback while the chunk downloads.

Why Router Lazy Loading Routes matters

A single bundle containing every page makes the first load slow, which hurts Core Web Vitals and search rankings. Splitting by route is the highest-value optimisation in most React apps.

Router Lazy Loading Routes example

import { lazy, Suspense } from 'react';

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

<Suspense fallback={<PageSkeleton />}>
  <Routes>
    <Route path="/dashboard" element={<Dashboard />} />
    <Route path="/reports" element={<Reports />} />
  </Routes>
</Suspense>

Key points to remember

• The lazily imported module must have a default export.
• Split by route first; component-level splitting rarely pays for itself.
• Keep the fallback close in size to the real page to avoid layout shift.

Common mistakes with Router Lazy Loading Routes

• Calling lazy inside a component, which recreates the lazy component every render.
• Splitting a tiny component and adding a network round trip to save two kilobytes.