React Suspense

In the last lesson, React React.lazy, you saw lazy components must be wrapped in Suspense. This lesson is about Suspense itself: the component that shows a fallback while lazy content loads, and where to place it for a smooth wait.

🤔 What problem does Suspense solve?

Here’s the gap Suspense fills.

• React.lazy loads a component’s code on demand, which isn’t instant.
• During that download, React has no component to render yet.
• Without help, that would be a blank or broken spot on the page.
• The user needs to see something, like a loading message, while they wait.

So Suspense is the waiting room. It shows a fallback while the lazy content loads, then swaps in the real thing once it’s ready.

🐍 What is Suspense?

Let’s define it clearly.

• Suspense is a component that wraps lazy content and shows a fallback while that content loads.
• You give it a fallback prop, which is the JSX to show during loading.
• When the content inside finishes loading, React replaces the fallback with it.

Think of it like a “please wait” sign on a shop door while it’s getting ready. The sign shows until the shop is open, then it comes down and you see the real thing.

🧩 Using Suspense

You wrap one or more lazy components in Suspense and give it a fallback.

import { lazy, Suspense } from "react";

const Profile = lazy(() => import("./Profile"));

function App() {
  return (
    <Suspense fallback={<p>Loading profile...</p>}>
      <Profile />
    </Suspense>
  );
}

Read the pieces.

• Suspense wraps the lazy Profile.
• fallback={<p>Loading profile...</p>} is what shows while Profile’s bundle loads.
• Once loaded, React swaps the fallback for the real Profile.
• The fallback can be any JSX: text, a spinner, a skeleton, whatever fits.

(while loading)
Loading profile...

(once the bundle arrives)
[the real Profile component shows]

🎯 The fallback can be anything

The fallback is just JSX, so you can make the wait look good, not just plain text.

• Plain text like “Loading…” is the simplest.
• A spinner, a small animated circle, feels more polished.
• A skeleton, gray boxes shaped like the coming content, feels the smoothest because the layout doesn’t jump.
• So match the fallback to the space it fills: a full-page loader for a page, a tiny spinner for a small widget.

🪜 Where to place Suspense boundaries

This is the thoughtful part: where you put Suspense decides how the loading feels.

// one boundary - everything inside waits together, shows one fallback
<Suspense fallback={<p>Loading...</p>}>
  <Header />
  <MainContent />
</Suspense>

// separate boundaries - each area loads and reveals independently
<Suspense fallback={<p>Loading header...</p>}>
  <Header />
</Suspense>
<Suspense fallback={<p>Loading content...</p>}>
  <MainContent />
</Suspense>

Here’s how to think about it.

• One big boundary means everything inside shows the fallback until all of it is ready, then appears together.
• Several smaller boundaries let each part show its own fallback and appear as soon as it is ready.
• So separate boundaries can feel faster, because ready parts don’t wait for slow ones.
• But too many tiny boundaries can feel busy, with loaders popping in everywhere.
• So place boundaries where a shared loading state makes sense: page-level for the whole page, smaller ones around independent heavy widgets.

⚠️ Common Mistakes

A common mistake is wrapping with Suspense but forgetting the fallback, or putting the boundary in the wrong place.

// ❌ no fallback - the user sees nothing useful while loading
<Suspense>
  <Profile />
</Suspense>

// ✅ always give a fallback
<Suspense fallback={<p>Loading...</p>}>
  <Profile />
</Suspense>

Keep these in mind.

• Don’t forget the fallback. It’s the whole point; it’s what shows during the wait.
• Don’t put the boundary too low or too high. Place it where the loading state should appear.
• Don’t scatter dozens of tiny boundaries; group loading where it makes sense for the user.

✅ Best Practices

A few habits for Suspense.

• Always provide a meaningful fallback, sized to the area it covers.
• Use a page-level boundary for lazy routes, and smaller ones for independent heavy widgets.
• Prefer skeletons or steady-size loaders so the layout doesn’t jump when content arrives.
• One boundary can cover several lazy components that should load together.

🧩 What You’ve Learned

• ✅ Suspense shows a fallback while the lazy content inside it is loading
• ✅ Once the content is ready, React swaps the fallback for the real component
• ✅ The fallback is just JSX: text, a spinner, or a skeleton
• ✅ Where you place boundaries controls how loading feels: one big area or several independent ones
• ✅ Separate boundaries let ready parts appear without waiting for slow ones
• ✅ Always provide a meaningful fallback, and don’t over-scatter tiny boundaries

🚀 What’s Next?

That wraps up the Advanced React Patterns module. You now know compound components, HOCs, render props, and code splitting with lazy and Suspense. Next we step back and look at how to organize a whole React project well, starting with folder structure.

React Folder Structure