Suspense

Suspense provides a boundary where React can show fallback UI while a supported child operation is not ready. It is commonly used for lazy-loaded components and can participate in modern React data-loading patterns depending on the framework and architecture.

Basic Suspense

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

Nested boundaries

Different parts of a screen can have different loading boundaries. This can improve perceived performance because one slow section does not have to block unrelated UI.

<Header />

<Suspense fallback={<ChartSkeleton />}>
  <RevenueChart />
</Suspense>

<Suspense fallback={<TableSkeleton />}>
  <OrdersTable />
</Suspense>

Fallback design

A fallback should preserve the expected layout where possible. A skeleton often provides a better experience than a generic full-page spinner for a small section.

Error handling

Suspense handles waiting; an Error Boundary handles errors. In production applications they are often used together.

flowchart TD
A[Lazy component] --> B{Ready}
B -->|No| C[Suspense fallback]
B -->|Yes| D[Render component]
D --> E{Error}
E -->|Yes| F[Error Boundary]
E -->|No| G[UI]

Output

Reports section:
[Chart skeleton]
[Table skeleton]

After modules load:
Revenue Chart
Orders Table

Common mistakes

• Thinking Suspense catches errors.
• Using one giant fallback for the entire application.
• Making fallbacks visually unrelated to the final layout.

Interview questions

• What does Suspense do?
• Suspense vs Error Boundary?
• Can Suspense be nested?
• Why use skeletons?