🎯 <Suspense> — Defer Rendering Until Ready

Wraps components that may suspend, showing a fallback UI while waiting.

✅ Basic Syntax

<Suspense fallback={<p>Loading...</p>}>
  <SomeComponent />
</Suspense>

• Renders the fallback until all nested children “resolve”
• Required when using:
  • React.lazy()
  • use(promise)
  • await in async components (Client side)

✅ Use Cases

✅ Example: Lazy-loaded Component

const Chart = lazy(() => import('./Chart'));

function Page() {
  return (
    <Suspense fallback={<p>Loading chart...</p>}>
      <Chart />
    </Suspense>
  );
}

✅ Example: Streaming async data with use()

function Message({ promise }) {
  const data = use(promise);
  return <p>{data}</p>;
}

<Suspense fallback={<p>Loading message...</p>}>
  <Message promise={fetchMessage()} />
</Suspense>

✅ Can Be Nested

<Suspense fallback={<Spinner />}>
  <ComponentA />
  <Suspense fallback={<Skeleton />}>
    <ComponentB />
  </Suspense>
</Suspense>

Each nested <Suspense> handles its own loading boundaries independently.