Skip to content
masterclassBuddyTech Buzz5 fresh blogs · 5:00 AM IST

React 19+ · Hook

use

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.

How it works

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.

Syntax

use(resource)

Parameters

NameTypeDescription
resourcePromise<T> | Context<T>The resource whose value should be read; the documented resource types are a Promise or context.

Returns

The resolved Promise value or the current context value; a pending Promise suspends rendering.

Key points

  • The API reads supported render-time resources, chiefly Promises and context values.
  • Passing a context returns the value supplied by the nearest matching provider.
  • Promise reads integrate with Suspense: pending work pauses the component's render.
  • Its call-site rule is more flexible than ordinary Hooks, allowing branches and iteration.

Common mistakes

  • Do not inspect Promise internals to avoid use; pass the Promise to React instead.

Example: Reading a Promise with use

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.

When to use it

Read asynchronous resources with Suspense

A component needs data represented by a Promise and should show fallback UI until it is ready.

Read context conditionally

A component only needs a context value in one branch or while iterating over items.

Compose resource reads

A custom Hook needs to expose render-time access to a Promise or context.

Interview questions

QWhat does React's use API do?

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.

QCan use be called conditionally?

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.

QWhat happens when use receives a pending Promise?

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.

  • Suspense
  • useContext
  • Promise
  • Rules of Hooks

Source: use. Checked 2026-10-15.