React Suspense Cheat Sheet

What Is React Suspense?

React Suspense lets you delay rendering parts of your UI until they're ready — whether that’s loading a component or fetching data. It improves responsiveness by showing fallback content while waiting.

Handles async loading
Shows fallback UIs like spinners or skeletons
Improves perceived performance

Basic Usage: Lazy Loading Components

Use React.lazy() and wrap it with Suspense:

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

React.lazy() enables code splitting
fallback is what renders while waiting

Fallback Components: Keep Users Engaged

Fallback UIs should:

Match the size/shape of the final content
Reduce layout shifts and loading anxiety
Be quick and simple

<Suspense fallback={<SkeletonCard />}>
  <ProductCard />
</Suspense>

Avoid blank screens — even 500ms of visual feedback helps.

Suspense for Data Fetching (React 18+)

React 18 allows Suspense to work with asynchronous data. Supported by:

React Server Components
Libraries like react-query, Relay, SWR, etc.

Example with a data-aware component:

<Suspense fallback={<div>Loading user...</div>}>
  <UserProfile />
</Suspense>

Data libraries manage the actual fetching and caching.

Nested Suspense = Smooth UX

You can wrap different parts of your UI separately:

<Suspense fallback={<SidebarLoader />}>
  <Sidebar />
</Suspense>

<Suspense fallback={<MainLoader />}>
  <MainContent />
</Suspense>

This way, parts of the page load independently — no more “all-or-nothing.”

Best Practices

Use Suspense at logical loading boundaries (e.g. page sections)
Keep fallback UIs fast, relevant, and minimal
Combine with Error Boundaries to handle failures
Don’t wrap everything — use it where loading is noticeable

Use Cases at a Glance

Summary

React Suspense helps you:

Wait for components or data before rendering
Fallback with visual feedback while waiting
Optimize both UX and performance
Control what loads when — without writing complex loading logic