🪝 Introduction to use
The use Hook is a React Hook that allows components to read the value of a Promise or a Context. When used with a Promise, React automatically suspends rendering until the Promise resolves, making asynchronous data fetching simpler and more declarative. When used with a Context, it provides an alternative way to read context values.
Important
🎯 Why Use use?
Traditionally, asynchronous data fetching required managing loading, success, and error states manually using Hooks such as useEffect and useState. The use Hook simplifies this workflow by allowing React to wait for asynchronous values automatically.
- Read Promise values directly.
- Work naturally with Suspense.
- Reduce manual loading state management.
- Read Context values using a unified API.
⚙️ Syntax
Basic Syntax
const value = use(resource);| Part | Description |
|---|---|
| resource | A Promise or Context object. |
| value | The resolved Promise value or current Context value. |
🔄 How use Works
💻 Example 1: Reading a Promise
Using a Promise
import { Suspense, use } from "react";
function User({ userPromise }) {
const user = use(userPromise);
return <h2>{user.name}</h2>;
}
export default function App({ userPromise }) {
return (
<Suspense fallback={<p>Loading...</p>}>
<User userPromise={userPromise} />
</Suspense>
);
}If the Promise has not resolved, React suspends rendering and displays the nearest Suspense fallback until the data becomes available.
💻 Example 2: Reading Context
Using Context with use
import { createContext, use } from "react";
const ThemeContext = createContext("light");
function Header() {
const theme = use(ThemeContext);
return <h1>{theme}</h1>;
}The use Hook reads the nearest value provided by the matching Context Provider.
📊 useEffect vs use for Data Fetching
| useEffect | use |
|---|---|
| Requires manual loading state. | Works naturally with Suspense. |
| Runs after rendering. | Reads asynchronous values during rendering. |
| More boilerplate. | Cleaner asynchronous code. |
📅 Promise Resolution Timeline
A Promise is passed to use().
React suspends rendering while the Promise is pending.
The Promise resolves successfully.
React resumes rendering using the resolved value.
🎯 Common Use Cases
Read asynchronous data without manually tracking loading state.
Access shared Context values through the unified use() API.
Display fallback UI automatically while asynchronous work completes.
Simplify data loading in modern React applications that use Server Components.
⚠️ Common Mistakes
- Using use() without an appropriate Suspense boundary when reading Promises.
- Expecting use() to replace every use of useEffect.
- Passing ordinary values instead of supported resources.
- Ignoring error boundaries for rejected Promises.
Warning
✅ Best Practices
- Use use() with Suspense for asynchronous rendering.
- Pass only supported resources such as Promises or Context objects.
- Use Error Boundaries to handle rejected Promises gracefully.
- Choose use() when it simplifies asynchronous rendering instead of introducing unnecessary complexity.
- Keep asynchronous logic predictable and easy to maintain.
📚 Official Resource
Learn more about use in the official React documentation at React use Documentation.