Suspense & lazy() in React

From the React Components & JSX cheat sheet · Optimization & Advanced Features · verified Jul 2026

Suspense & lazy()

Code-split components and show fallback UI while loading

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

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

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyChart />
    </Suspense>
  );
}
💡 lazy() splits the component into its own JS bundle - only loaded when rendered
⚡ Use multiple Suspense boundaries to load page sections independently
📌 Route-level code splitting is the biggest bundle-size win for most apps
🟢 Suspense also works with data libraries that support it (Relay, TanStack Query)
suspenselazycode-splitting

More React tasks

Back to the full React Components & JSX cheat sheet