Code Splitting with lazy() and Suspense

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.