React Suspense and lazy loading patterns

Need to split large React applications into smaller bundles that load on demand.

Use React.lazy and Suspense for route-level code splitting:

import { Suspense, lazy } from 'react';

// Lazy-load route components
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
const Profile = lazy(() => import('./pages/Profile'));

// Loading fallback
function LoadingSpinner() {
  return <div className="spinner">Loading...</div>;
}

// App with lazy routes
function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </Suspense>
  );
}

// Prefetch on hover (preload before user clicks)
function NavLink({ to, children }) {
  const prefetch = () => {
    // Triggers the dynamic import early
    if (to === '/settings') import('./pages/Settings');
    if (to === '/profile') import('./pages/Profile');
  };

  return (
    <Link to={to} onMouseEnter={prefetch}>
      {children}
    </Link>
  );
}

// Named exports need a wrapper
const MyComponent = lazy(() =>
  import('./MyComponent').then(mod => ({ default: mod.MyComponent }))
);

Code splitting reduces initial bundle size. Users only download code for the features they actually use.

Large React applications needing faster initial load