The answer
Around lazy-loaded routes, and around sections that load independently. You can nest them, with the nearest boundary catching the suspension. Place them where a fallback makes sense to the user.
What Is React Suspense and How Does Lazy Loading Work?
Where should I place Suspense boundaries?
More FAQs in What Is React Suspense and How Does Lazy Loading Work?
Suspense is a component that lets you show a fallback while a child is not ready, like while code is loading or data is being fetched. It makes loading states declarative instead of manual.
React.lazy lets you render a component imported dynamically, so its code is loaded only when needed. You wrap the lazy component in a Suspense with a fallback, and the fallback shows while the code loads.
Without it, your entire app ships in one bundle, slowing the first load. Lazy loading splits routes so users only download the code for the page they are on, which improves initial load significantly.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.