May 8, 2026

React 19's `use()` hook unwraps promises in components

You can `await` a promise in a render function via `use(promise)` — Suspense boundary handles the loading state.

In React 19, use() lets you read the value of a promise (or a Context) directly inside a component's render function:

import { use } from "react";
 
function UserName({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise);
  return <span>{user.name}</span>;
}

Wrap the consumer in <Suspense> and you get loading-state handling for free. The promise must be created outside the rendering component (typically in a Server Component or higher up), otherwise you'll create a new promise every render and never resolve.

Here it is running — the promise is created in the click handler (outside the component that reads it), then unwrapped with use() behind a Suspense fallback:

Nothing loaded yet.

This makes a lot of useEffect + useState boilerplate disappear when you're just fetching one thing.