Explain React Suspense and its use cases. | Interview Question

Q: Explain React Suspense and its use cases.

**Target Audience:** Engineers preparing for React interviews — assumes components and promises. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The suspension behaviour in section 3 was produced by rendering a pending promise through use() on React 19.2.8 and reading the DOM before and after it resolved. ## 1. Why This Even Matters — A Story First In a restaurant, individual dishes do not each apologise for taking time. The waiter manages it: they know the table is waiting and they decide what to say and when to bring things out. A dish that is not ready simply says so, upward, and the waiter handles the presentation. Suspense is the waiter. Components stop carrying their own "still loading, sorry" logic; they say *I am not ready* and a boundary above them decides what the user sees. ## 2. The Core Idea 📌 **Interview term: Suspense** — a boundary component that rend

The problem

Question presented to candidate: "What is Suspense, what actually triggers it, and what do you use it for today?"

What a strong answer should cover:

<Suspense fallback={...}> is a boundary: if any component below it suspends, React shows the fallback until it is ready.
It moves loading states from inside each component to a boundary above them, so a component never needs its own isLoading.
What triggers it: React.lazy, use() on an unresolved promise, and framework data loaders. Not arbitrary promises, and not a plain useEffect fetch.
Behaviour is like an Error Boundary: React walks up to the nearest boundary.
Placement is a design decision — it decides the granularity of your loading UI.
Streaming SSR: the server sends the shell immediately and streams each boundary as it resolves, and boundaries hydrate independently.
useTransition to avoid a fallback flash when updating already-visible content.
The main constraint: it does not manage or cache the promise — creating one during render restarts the request every render.

Clarifying questions expected:

"Is the data coming from a framework loader or a Server Component, or being fetched client-side?" — that decides whether Suspense is even usable.

Code / implementation expected: Yes — a Suspense boundary around a lazy component and a use() read.

suspense
async
performance

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for React interviews — assumes components and promises. Difficulty: Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The suspension behaviour in section 3 was produced by rendering a pending promise through use() on React 19.2.8 and reading the DOM before and after it resolved.

1. Why This Even Matters — A Story First

In a restaurant, individual dishes do not each apologise for taking time. The waiter manages it: they know the table is waiting and they decide what to say and when to bring things out. A dish that is not ready simply says so, upward, and the waiter handles the presentation.

Suspense is the waiter. Components stop carrying their own "still loading, sorry" logic; they say I am not ready and a boundary above them decides what the user sees.

2. The C

The solution is hidden so you can try first

6 min read · 9 sections

Try it in the playground

Open any example in the playground to run and change it.

ReactSuspense around a lazy component and a use() read, with no loading flags

Open in playground

import { Suspense, lazy, use, useState, useTransition } from "react";

// ── Trigger 1: React.lazy. The boundary covers the chunk download. ─────────
const LazyPanel = lazy(
  () => new Promise((resolve) =>
    setTimeout(() => resolve({
      default: () => (
        <div style={{ background: "#eef", padding: 10, borderRadius: 6 }}>
          Lazy panel — arrived as its own chunk.
        </div>
      ),
    }), 800)),
);

// ── Trigger 2: use() on a promise. Crucially the promise is created OUTSIDE
//    the component. Creating it during render would restart it every render. ─
const cache = new Map();
function getUser(id) {
  if (!cache.has(id)) {
    cache.set(id, new Promise((resolve) =>
      setTimeout(() => resolve({ id, name: "User " + id }), 700)));
  }
  return cache.get(id);
}

// Note what is NOT here: no isLoading, no useEffect, no conditional. The
// component reads the value and returns UI; waiting is the boundary's job.
function UserCard({ id }) {
  const user = use(getUser(id));
  return (
    <div style={{ background: "#efe", padding: 10, borderRadius: 6 }}>
      Loaded <strong>{user.name}</strong>
    </div>
  );
}

function Skeleton({ label }) {
  return (
    <div style={{ background: "#f2f2f2", color: "#888", padding: 10, borderRadius: 6 }}>
      {label}
    </div>
  );
}

export default function App() {
  const [userId, setUserId] = useState(1);
  const [showLazy, setShowLazy] = useState(false);
  const [isPending, startTransition] = useTransition();

  return (
    <div style={{ padding: 24, fontFamily: "system-ui", lineHeight: 1.6, display: "grid", gap: 12 }}>
      <div>
        <button onClick={() => setShowLazy((s) => !s)}>
          {showLazy ? "Hide" : "Load"} lazy panel
        </button>{" "}
        {/* startTransition keeps the CURRENT card visible while the next one
            loads, instead of collapsing back to the skeleton. */}
        <button onClick={() => startTransition(() => setUserId((n) => n + 1))}>
          Next user (in a transition)
        </button>{" "}
        <button onClick={() => setUserId((n) => n + 1)}>Next user (no transition)</button>
      </div>

      {/* Separate boundaries: each region loads independently. */}
      {showLazy && (
        <Suspense fallback={<Skeleton label="fetching the chunk…" />}>
          <LazyPanel />
        </Suspense>
      )}

      <div style={{ opacity: isPending ? 0.5 : 1, transition: "opacity .2s" }}>
        <Suspense fallback={<Skeleton label="loading user…" />}>
          <UserCard id={userId} />
        </Suspense>
      </div>

      <p style={{ color: "#666", fontSize: 13 }}>
        Compare the two "next user" buttons. Without a transition the card
        collapses to the skeleton; with one the old card stays visible and just
        dims while the next loads.
      </p>
    </div>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.