Read asynchronous resources with Suspense
A component needs data represented by a Promise and should show fallback UI until it is ready.
React 19+ · Hook
React's use API reads a Promise or context during rendering. Promise reads suspend while pending, and unlike ordinary Hooks, use can be called in conditions and loops.
Call use(resource) while rendering a component or custom Hook to read a Promise or context. A pending Promise suspends the component until it resolves, while a context produces its current value; unlike ordinary Hooks, use may appear in conditions and loops, but not in try/catch blocks.
use(resource)| Name | Type | Description |
|---|---|---|
resource | Promise<T> | Context<T> | The resource whose value should be read; the documented resource types are a Promise or context. |
The resolved Promise value or the current context value; a pending Promise suspends rendering.
import { Suspense, use } from 'react';
const messagePromise = Promise.resolve('Hello from a resource');
function Message() {
const message = use(messagePromise);
return <p>{message}</p>;
}
export default function App() {
return (
<Suspense fallback={<p>Loading…</p>}>
<Message />
</Suspense>
);
}Pass a Promise to use; React suspends the component while it is pending and renders the resolved value afterward.
A component needs data represented by a Promise and should show fallback UI until it is ready.
A component only needs a context value in one branch or while iterating over items.
A custom Hook needs to expose render-time access to a Promise or context.
use(resource) reads a Promise or context during rendering. If the Promise is pending, the component suspends; after resolution, rendering can use its value.
Follow-up: How does use differ from useContext? use can read context conditionally or inside loops, whereas useContext must be called at the component's top level.
Unlike ordinary Hooks, use may be called inside conditions and loops. It still must be called from a component or Hook, and the Promise itself must be passed to it.
Follow-up: What restriction remains around exception handling? The call cannot be placed in try/catch/finally, so errors should be handled through React's supported error-handling mechanisms.
A component that calls use with a pending Promise suspends while waiting for the Promise. A Suspense boundary can provide the fallback UI during that suspended render.
Follow-up: What should code avoid when consuming a Promise? It should not read promise.status or promise.value directly; React must receive the Promise through use.
SuspenseuseContextPromiseRules of Hooks