React Suspense
5 min read
React.lazy(() => import('./Page')) loads a component only when needed. Wrap with <Suspense fallback={<Spinner />}>. This splits the bundle into smaller chunks and reduces the initial download time for users.
Suspense and Lazy Loading
import { lazy, Suspense } from "react";
// Lazy load a component
const Dashboard = lazy(() => import("./Dashboard"));
function App() {
return (
Loading...
}>
);
}
// React 18 — Suspense for data fetching (with libraries like SWR or React Query)