0Pricing
React Academy · Lesson

Suspense for Data & Code Boundaries

Combine Suspense with lazy loading and future data libraries for clean loading states.

Suspense for Data & Code Boundaries is a free React Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will use React Suspense with React.lazy for code splitting and with data libraries to show fallback UI while content loads.

What Is Suspense?

Suspense is a React component that catches components in its subtree that are 'suspended' (waiting for something to load) and renders a fallback UI instead.
<Suspense fallback={<Spinner />}>
  <MyComponent />
</Suspense>

Suspense with React.lazy

React.lazy() creates a component that is loaded from a dynamic import. When used inside Suspense, the fallback renders until the JavaScript bundle is downloaded.
const HeavyChart = React.lazy(() => import('./HeavyChart'));

<Suspense fallback={<p>Loading chart...</p>}>
  <HeavyChart />
</Suspense>

Multiple Lazy Components Under One Boundary

Multiple lazy components under the same Suspense boundary share one fallback. React waits for ALL of them to load before showing the content. Use nested boundaries for independent loading.

Nested Suspense Boundaries

Nest Suspense boundaries to show parts of the UI as they load instead of waiting for everything. Outer boundaries catch slower loads; inner boundaries handle fast loads.
<Suspense fallback={<PageSkeleton />}>
  <Header />
  <Suspense fallback={<ChartSkeleton />}>
    <LazyChart />
  </Suspense>
</Suspense>

Suspense with Data Libraries

Libraries like React Query (with suspense: true) and Relay suspend components that are waiting for data, just like lazy loading. The Suspense boundary provides the loading fallback.
const { data } = useQuery({ queryKey: ['users'], queryFn: fetchUsers,
  suspense: true }); // component suspends until data is ready
// No loading check needed — data is always available here

use() Hook in React 19

In React 19, the `use(promise)` hook lets you read a promise directly in a component. If the promise is pending, the component suspends and the nearest Suspense boundary shows its fallback.
import { use } from 'react';

function Profile({ userPromise }) {
  const user = use(userPromise); // suspends until resolved
  return <p>{user.name}</p>;
}

SuspenseList for Ordered Reveals

React.SuspenseList (experimental) coordinates multiple Suspense boundaries so they reveal in a specific order (top-to-bottom, all at once, etc.) — preventing the UI from popping in chaotically.

Suspense Does Not Catch Errors

Suspense only handles loading states. It does not catch errors from failed fetches. Combine Suspense with an Error Boundary to handle both loading and error states.
<ErrorBoundary fallback={<Error />}>
  <Suspense fallback={<Spinner />}>
    <DataComponent />
  </Suspense>
</ErrorBoundary>

Skeleton Screens as Fallbacks

Instead of spinners, use skeleton screens as Suspense fallbacks. Skeleton screens are placeholder layouts that match the content's shape, reducing layout shift when content arrives.

Quick Check

What is shown to users while a React.lazy() component's bundle is being downloaded?

Recap

Suspense wraps loading components and shows a fallback. Use React.lazy for code splitting, data library suspense modes for data loading, and nest boundaries for independent progressive reveals. Pair with Error Boundary for complete error handling.

Course Complete

Congratulations! You finished **Async Patterns in React: Promises & Concurrency**. You now handle race conditions, use useTransition and useDeferredValue for responsive UIs, and leverage Suspense for loading boundaries.

Frequently asked questions

Is the “Suspense for Data & Code Boundaries” lesson free?

Yes — the full text of “Suspense for Data & Code Boundaries” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Suspense for Data & Code Boundaries”?

Combine Suspense with lazy loading and future data libraries for clean loading states. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Suspense for Data & Code Boundaries” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Racing Conditions & Effect Cleanup
  2. useTransition for Non-Blocking UI Updates
  3. useDeferredValue for Input Debouncing
  4. Suspense for Data & Code Boundaries
← Back to React Academy