React Suspense: After Five Months, It Finally Makes Sense

React Suspense was on my list of concepts I thought I understood but couldn't explain. Five months of shipping with the new Next.js defaults forced me to actually learn it. The mental model that clicked is simpler than the docs make it sound.

The One-Sentence Model

A Suspense boundary is a place where the UI says 'I'll wait here until my children are ready, and show this fallback in the meantime.' That's it. Everything else is how children signal readiness.

Why I Couldn't See This Before

The docs lead with mechanics: promises, throw-to-suspend, transitions. The mechanics are real but they aren't the point. The point is a declarative pattern for 'this part of the UI is loading.' Once I stopped chasing the mechanics and started placing boundaries where I wanted loading states, Suspense became a tool I could use.

export default function Page() {
  return (
    <main>
      <Header />
      <Suspense fallback={<Skeleton />}>
        <SlowDataComponent />
      &lt;/Suspense>
      <Footer />
    &lt;/main>
  );
}

The header and footer render immediately. The slow bit shows a skeleton until its data arrives. I didn't write loading logic. The boundary is the logic.

The Practical Rule

Place a Suspense boundary wherever you'd otherwise write if (loading) return <Skeleton />. That's usually around any component that fetches its own data. The boundary replaces the conditional with a declarative promise.

See the React Suspense docs.