A simple demonstration of React Suspense with client components, showcasing code splitting with lazy() and the Suspense boundary pattern.
This demo illustrates how React Suspense works with:
- Code splitting using
React.lazy()for component-level lazy loading - Suspense boundaries with fallback UI during component loading
- Suspender pattern demonstrating how components can suspend rendering while waiting for data
When you run the demo, you'll see:
- A "Loading..." fallback message appears immediately
- After 3 seconds, the
SuspendedComponentloads and displays "Done" - This demonstrates the Suspense boundary in action with lazy-loaded components
- Node.js (v18 or higher recommended)
- pnpm (package manager)
pnpm installStart the development server:
pnpm devThe app will be available at http://localhost:5173 (or the next available port).
Build for production:
pnpm buildPreview the production build locally:
pnpm previewThe demo uses:
React.lazy()to dynamically import theSuspendedComponent<Suspense>boundary with a "Loading..." fallback- A suspender pattern in
SuspendedComponentthat throws a promise, causing React to suspend rendering until the promise resolves
- React 19.2.0
- TypeScript
- Vite
- pnpm
MIT