The use() Hook
React 19's use() reads the value of a promise or context during render.
Syntax
const data = use(promise);use is a new React 19 API that lets a component read a resource such as a promise or a context. When you pass a promise, use suspends the component until it resolves, working together with Suspense.
What makes it special
- Unlike other hooks,
usecan be called inside conditions and loops. - Reading a promise with
usehands off loading UI to the nearest<Suspense>boundary.
The promise is typically created outside the component (or cached by a framework) so it is stable across renders.
Example
import { use, Suspense } from 'react';
function Message({ messagePromise }) {
const text = use(messagePromise); // suspends until resolved
return <p>{text}</p>;
}
function App({ messagePromise }) {
return (
<Suspense fallback={<p>Loading...</p>}>
<Message messagePromise={messagePromise} />
</Suspense>
);
}When to use it
- A React 19 server component passes a data promise to a client component that calls use() so the UI suspends automatically until the promise resolves.
- A configuration panel reads feature flags from a context using use() inside a conditional block, which is not possible with the traditional useContext hook.
- A dashboard widget reads a shared data promise from a cache and passes it to use() so multiple widgets share the same pending request without duplicate fetches.
More examples
use() with a promise
Passes a fetch promise to use() inside a Suspense boundary; the component suspends until the promise settles.
import { use, Suspense } from 'react';
function UserName({ userPromise }) {
const user = use(userPromise); // suspends until resolved
return <span>{user.name}</span>;
}
function App() {
const promise = fetch('/api/me').then(r => r.json());
return (
<Suspense fallback={<span>Loading...</span>}>
<UserName userPromise={promise} />
</Suspense>
);
}use() with context
Uses use() to read a context value inside a conditional, which is not allowed with useContext.
import { use, createContext } from 'react';
const ThemeContext = createContext('light');
function ThemedBox({ show }) {
// use() can be called conditionally — unlike useContext
if (!show) return null;
const theme = use(ThemeContext);
return <div className={`box box--${theme}`}>Themed</div>;
}Shared promise across components
Both components call use() with the same promise; the fetch runs once and both share the resolved value.
import { use, Suspense } from 'react';
const dataPromise = fetch('/api/config').then(r => r.json());
function FeatureA() {
const config = use(dataPromise);
return <p>Feature A: {config.featureALabel}</p>;
}
function FeatureB() {
const config = use(dataPromise);
return <p>Feature B: {config.featureBLabel}</p>;
}
function Dashboard() {
return (
<Suspense fallback={<p>Loading config...</p>}>
<FeatureA />
<FeatureB />
</Suspense>
);
}
Discussion