What is the new use() function in React 19, and how does it work with Promises and Context?

Short answer

use() accepts a Promise or Context and, unlike other Hooks, can be called conditionally inside if statements or loops; it integrates automatically with Suspense.

Explanation

use() is a unique exception to the classic Rules of Hooks and can be called conditionally. When passed a Promise, it suspends rendering until it resolves (using Suspense); when passed Context, it reads the value like useContext but can do so conditionally.

Code example

import { use } from 'react';

function UserBadge({ userPromise, shouldShow }: { userPromise: Promise<User>; shouldShow: boolean }) {
  if (!shouldShow) return null; // Fully valid conditional call with use()

  const user = use(userPromise);
  return <span>{user.name}</span>;
}

Common mistakes

• Creating a Promise inside the component body on every render instead of passing it from the server or a cache, causing an infinite suspension loop.

Follow-up questions

• How does Suspense handle Data Fetching and nested loading states?
• What is the "use client" directive, and when should it be used in an RSC architecture?

Sources

• React docs — use