React: What is React 19 use() hook?

use() reads resources during render — promises and context. Think of it as a universal "unwrap" mechanism: give it a promise or a context object, and it returns the resolved value or the context value right inside your component function body.

Code:

1import { use, Suspense } from "react";
2
3async function fetchUser(id: string) {
4  const res = await fetch(`/api/users/${id}`);
5  return res.json();
6}
7
8const userPromise = fetchUser("1");
9
10function UserProfile() {
11  const user = use(userPromise); // suspends until resolved
12  return <h1>{user.name}</h1>;
13}
14
15function App() {
16  return (
17    <Suspense fallback={<Loading />}>
18      <UserProfile />
19    </Suspense>
20  );
21}

Reading context:

1const ThemeContext = createContext("light");
2
3function Button() {
4  const theme = use(ThemeContext); // no useContext needed
5  return <button className={theme}>Click</button>;
6}

Conditional use:

1function UserProfile({ userId, showDetails }) {
2  const user = use(userPromise);
3  // use() can be called conditionally — unlike other hooks
4  const details = showDetails ? use(detailsPromise) : null;
5  return <div>...</div>;
6}

How it works internally:

1. When use(promise) is called and the promise is still pending, React suspends the component — it throws a special internal promise.
2. The nearest <Suspense> boundary catches this and renders its fallback.
3. When the promise resolves, React re-renders the suspended component, and use() now returns the resolved value.
4. For context, use(Context) is functionally equivalent to useContext(Context) but can be called conditionally.

System design context:

• In a large app, you might hoist promise creation to a data cache (e.g., cache() from React 19 or a library like SWR) so that the same promise is shared across components in one request.
• This avoids waterfalls: two sibling components each calling use(samePromise) share the same fetch instead of triggering two network requests.
• On the server, use() can await directly in Server Components, making data fetching linear and readable.

Common pitfalls with root cause + fix:

• Pitfall: Creating a new promise on every render. Fix: Create the promise outside the component or memoize it with useMemo.
• Pitfall: Not wrapping in <Suspense>. Fix: Always provide a Suspense boundary — without one, React throws an error.
• Pitfall: Using use() for fire-and-forget side effects. Fix: use() is for reading values, not for triggering mutations.

Benefits:

1. Reads promises directly in render — no useEffect + useState dance
2. Can be called conditionally — breaks the rules-of-hooks restriction
3. Replaces useContext in many cases with a unified API
4. Works with Suspense for declarative loading states
5. Enables server-first data patterns where fetching is linear

Monitoring/observability: In production, track suspended component durations via React Profiler callbacks. Long suspensions indicate slow data sources that should be cached or pre-fetched.