Suspense boundaries

Summary

Suspense catches promise-throwing children and shows fallback until resolved — coordinates with concurrent rendering. Boundaries should be granular (per-widget) not one app-wide spinner. SSR streaming sends fallback HTML then replaces with content. Error boundaries catch errors; Suspense catches loading — different APIs. Data frameworks integrate via use() and cache.

Code example

import { Suspense } from 'react';

function Page() {
  return (
    <>
      <Header />
      <Suspense fallback={<CardSkeleton />}>
        <SlowWidget />
      </Suspense>
    </>
  );
}

Key points

• Suspense catches promise-throwing children and shows fallback until resolved — coordinates with concurrent rendering.
• Boundaries should be granular (per-widget) not one app-wide spinner.
• SSR streaming sends fallback HTML then replaces with content.
• Error boundaries catch errors; Suspense catches loading — different APIs.
• Data frameworks integrate via use() and cache.

Further reading

• Suspense
• use hook

Related concepts

• Scheduler priorities
• Selective hydration