React Suspense lets you declaratively handle loading states for async operations. Here's how to use it.
Basic Suspense
Loading code block...
Nested Suspense
Loading code block...
Loading Fallbacks
Loading code block...
Error Boundaries with Suspense
Loading code block...
Data Fetching with Suspense
Loading code block...
SuspenseList (Experimental)
Loading code block...
Transitions with Suspense
Loading code block...
useDeferredValue
Loading code block...
Route-based Code Splitting
Loading code block...
Best Practices
Fallback Design:
✓ Match fallback to content shape
✓ Use skeleton screens for better UX
✓ Keep fallbacks lightweight
✓ Avoid layout shifts
Boundaries:
✓ Place near async content
✓ Use nested Suspense for granularity
✓ Combine with Error Boundaries
✓ Consider user experience flow
Performance:
✓ Preload critical paths
✓ Use transitions for navigation
✓ Avoid waterfall loading
✓ Cache fetched data
Avoid:
✗ Suspense boundary too high
✗ Missing error handling
✗ Flash of loading states
✗ Over-splitting code
Conclusion
React Suspense provides a declarative way to handle loading states. Use it with lazy loading for code splitting, combine with Error Boundaries for robust error handling, and leverage transitions for smooth navigation. Design fallbacks that match your content structure to minimize layout shifts.