Multiple boundaries

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.

Exercise Multiple Suspense

Complete the skeleton below. Write an App component; render <A /> and <B /> each inside its own <Suspense fallback={"{"<Spinner />}"}>. Export it.

Show example solution

import { Suspense } from "react";

function App() {
  return (
    <div>
      <Suspense fallback={<Spinner />}><A /></Suspense>
      <Suspense fallback={<Spinner />}><B /></Suspense>
    </div>
  );
}

export default App;

Test yourself

What do multiple boundaries provide?
- A single load
- Progressive loading
- Daha az kod
- Fast rendering
Show answer

Progressive loading — Multiple boundaries let each section load separately.

Multiple Suspense

<Suspense fallback={<Spinner />}><A /></Suspense><____ fallback={<Spinner />}><B /></Suspense>

Show answer

<Suspense fallback={<Spinner />}><A /></Suspense><Suspense fallback={<Spinner />}><B /></Suspense>

Multiple boundaries: match the terms

Multiple Suspense

Progressive loading
Single Suspense

Everything waits
fallback

Fallback content
local error

Stays isolated

Next lesson: Summary - Suspense and lazy

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies