Code Splitting with lazy() and Suspense

Basic Pattern

import { lazy, Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

Route-Based Splitting

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

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

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<PageLoader />}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/settings" element={<Settings />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Component-Based Splitting

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

const Chart = lazy(() => import('./Chart'));
const Table = lazy(() => import('./Table'));

function DataView() {
  const [view, setView] = useState('chart');

  return (
    <>
      <button onClick={() => setView('chart')}>Chart</button>
      <button onClick={() => setView('table')}>Table</button>

      <Suspense fallback={<Spinner />}>
        {view === 'chart' ? <Chart /> : <Table />}
      </Suspense>
    </>
  );
}

Named Exports

const { BarChart } = await import('./Charts');

export const BarChart = lazy(() =>
  import('./Charts').then(module => ({ default: module.BarChart }))
);

For comprehensive code splitting patterns, see:

research/react-19-comprehensive.md

lines 1224-1238.