What Makes use() Different
use() reads the value of a resource — currently a Promise or a Context — and unlike every other hook, it can be called conditionally, inside loops, and after early returns. It’s technically not bound by the Rules of Hooks the way useState or useEffect are.
Reading Context with use()
use() can read a Context the same way useContext does, but conditionally — something useContext itself cannot do.
Conditionally Reading Context
import { use } from "react";
function Panel({ showTheme }) {
if (showTheme) {
const theme = use(ThemeContext); // allowed — use() can be called conditionally
return <div className={theme}>Themed panel</div>;
}
return <div>Plain panel</div>;
}Reading a Promise with use()
When passed a Promise, use() suspends the component until it resolves — integrating directly with Suspense, without needing useEffect, useState, or a loading flag written by hand.
Suspending on a Promise
import { use, Suspense } from "react";
function UserProfile({ userPromise }) {
const user = use(userPromise); // suspends until the promise resolves
return <h1>{user.name}</h1>;
}
function App({ userPromise }) {
return (
<Suspense fallback={<p>Loading...</p>}>
<UserProfile userPromise={userPromise} />
</Suspense>
);
}The Promise Usually Comes from a Server Component
A Client Component using use() on a Promise typically receives that Promise as a prop from a Server Component that started the fetch — the Client Component doesn’t create the Promise itself on every render, which would refetch endlessly.
use() vs Other Hooks
| Regular Hooks (useState, etc.) | use() | |
|---|---|---|
| Can be called conditionally | No | Yes |
| Can be called in a loop | No | Yes |
| What it reads | Its own internal state | A Promise or a Context passed as its argument |
use() Is Not a Replacement for useEffect
use() reads an already-created resource (a Promise, a Context) — it doesn’t start effects, subscribe to anything, or run cleanup logic. useEffect and other hooks remain necessary for those cases.
Best Practice
Use use() to read a Promise passed down from a Server Component (in frameworks that support it) or to conditionally read Context — for everything else, the classic hooks (useState, useEffect, useContext) remain the right tool.