The use() Hook for Async Resources

In this lesson you will use React 19's use() hook to read promises and context values directly inside the render function, simplifying async data access.

use() is a React 19 hook that reads a resource — either a Promise or a Context — synchronously in the render function. If the Promise is pending, the component suspends and the nearest Suspense boundary shows its fallback.

import { use } from 'react';

function UserProfile({ userPromise }) {
  const user = use(userPromise); // suspends if pending
  return <h1>{user.name}</h1>;
}