React use Hook

What is use Hook in React?

The use API reads the value of a promise or a context during render. Unlike other hooks it may be called conditionally, and when given a pending promise it suspends the component so the nearest Suspense boundary shows a fallback.

Why use Hook matters

It removes the loading-state boilerplate from data fetching: instead of a status flag and a spinner branch, the component reads the value directly and Suspense handles the waiting.

use Hook example

import { use, Suspense } from 'react';

function JobDetail({ jobPromise }) {
  const job = use(jobPromise);   // suspends until it resolves
  return <h1>{job.title}</h1>;
}

function Page({ jobPromise }) {
  return (
    <Suspense fallback={<Spinner />}>
      <JobDetail jobPromise={jobPromise} />
    </Suspense>
  );
}

How this works

The promise is created outside the component and passed in. Creating it inside the component body would start a new request on every render.

Key points to remember

• Available from React 19.
• It is the only hook that may be called inside a condition or a loop.
• It also reads context, which makes conditional context reads possible.
• Combine with an error boundary to handle rejected promises.

Common mistakes with use Hook

• Creating the promise inside the component, causing an infinite fetch loop.
• Forgetting the Suspense boundary, so the suspension propagates further up than you intended.