hardFrontend

What does the `use()` hook do, and why is it special?

Q: What does the `use()` hook do, and why is it special?

**Core concept (TL;DR).** use() reads the value of a **resource** during render: use(promise) unwraps a promise (suspending until it resolves), and use(Context) reads context. It's special because — unlike every other hook — it can be called **conditionally** (inside if /loops), since it doesn't rely on call-order state. use(): read a promise or context in render <text x="135" y="64" fill="#06b6d4" font-size="11" font-weight="700" text-anchor="mid

528 views

Understand the problem

Reading promises and context during render with Suspense integration.

reactsuspensedata-fetching

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

use(promise) with Suspense

import { use, Suspense } from "react";

function Greeting({ namePromise }) {
  const name = use(namePromise);     // suspends until the promise resolves
  return <h3>Hello, {name}!</h3>;
}

// the promise is created OUTSIDE render (stable), then passed in
const namePromise = new Promise((res) => setTimeout(() => res("Ada"), 500));

export default function App() {
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <Suspense fallback={<p>Loading…</p>}>
        <Greeting namePromise={namePromise} />
      </Suspense>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

Compare render-as-you-fetch, fetch-on-render, and fetch-then-render.

What do `startTransition` and `useTransition` actually do under the hood?