React Suspense lets you declaratively specify loading states for components that are waiting for data or code to load.
Basic Usage
Loading code block...
Code Splitting with lazy()
Loading code block...
Nested Suspense Boundaries
Loading code block...
Data Fetching with Suspense
Loading code block...
Suspense with Error Boundaries
Loading code block...
Loading States and Skeletons
Loading code block...
SuspenseList (Experimental)
Loading code block...
useTransition for Non-Blocking Updates
Loading code block...
useDeferredValue
Loading code block...
Server Components with Suspense
Loading code block...
Custom Suspense-Compatible Resources
Loading code block...
Loading Priority Patterns
Loading code block...
Best Practices
Boundary Placement:
✓ Place at route level for pages
✓ Use nested boundaries for sections
✓ Match skeletons to component structure
✓ Consider user experience
Loading States:
✓ Use meaningful skeletons
✓ Avoid layout shifts
✓ Show progress when possible
✓ Keep fallbacks lightweight
Performance:
✓ Preload critical resources
✓ Use useTransition for navigation
✓ Defer non-critical updates
✓ Code split by routes
Avoid:
✗ Too many suspense boundaries
✗ Flashing loading states
✗ Blocking critical content
✗ Forgetting error boundaries
Conclusion
React Suspense provides declarative loading states for async operations. Use it with lazy() for code splitting, with data fetching libraries for loading states, and with useTransition for smooth transitions. Place Suspense boundaries strategically to control loading experiences. Combine with Error Boundaries for comprehensive async handling. Match skeleton components to actual content structure to prevent layout shifts and provide better user experience.