Multiple boundaries
- React course
- Intermediate
- Lesson 59/80
- 4 min
Learn to place multiple Suspense boundaries strategically.
Multiple boundaries
If you have multiple lazy components, giving each its own Suspense wrapper provides better control. This is called multiple boundaries.
A single Suspense shows the fallback until all components load. Separate Suspenses switch each component to real content as soon as it loads; the user sees content progressively.
This approach is good for large pages; each section loads at its own pace and the user sees something while waiting.
Multiple boundaries example
A page has three sections: header, main and footer. If each is a lazy component, you use three separate Suspenses. The header loads first, the footer later; the user sees the header while waiting.
With a single Suspense, the fallback would show until all sections load. This means a longer wait.
Multiple boundaries also isolate regional load errors; if one section errors, others are unaffected.
Practice Multiple Suspense
Complete the skeleton below. Write an App component; render <A /> and <B /> each inside its own <Suspense fallback={"{"<Spinner />}"}>. Export it.
Starter code
import { Suspense } from "react";
// Write the App component hereSample solution
import { Suspense } from "react";
function App() {
return (
<div>
<Suspense fallback={<Spinner />}><A /></Suspense>
<Suspense fallback={<Spinner />}><B /></Suspense>
</div>
);
}
export default App;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What do multiple boundaries provide?
- A single load
- Progressive loading Correct answer
- Daha az kod
- Fast rendering
Explanation: Multiple boundaries let each section load separately.
2 Multiple Suspense
<Suspense fallback={<Spinner />}><A /></Suspense><____ fallback={<Spinner />}><B /></Suspense><Suspense fallback={<Spinner />}><A /></Suspense><Suspense fallback={<Spinner />}><B /></Suspense>Explanation: Each section uses its own Suspense.
3 Multiple boundaries: match the terms
| Term | Meaning |
|---|---|
Multiple Suspense |
Progressive loading |
Single Suspense |
Everything waits |
fallback |
Fallback content |
local error |
Stays isolated |