Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
React 19’s use(resource) API is the narrow exception to the familiar rule that Hooks must be called in the same order on every render. You may call use conditionally or inside a loop; you may not do that with useState, useEffect, useContext, or custom Hooks. The exception applies only while rendering a function component or custom Hook, and use must not be wrapped in try/catch.
Why can React’s use() be conditional?
Ordinary Hooks rely on a consistent call order across renders. React associates their state and other Hook data with the order in which those calls occur. If a conditional branch or loop changes that order, React may associate data with the wrong call or report that it rendered more or fewer Hooks than expected. That is why the Rules of Hooks require ordinary Hooks to be called at the top level of a function component or custom Hook, before early returns.
use(resource) has a deliberately narrow exception: React allows it in conditions and loops because it reads a resource, such as a Promise or context, rather than adding an ordinary stateful Hook slot in the same ordered way. The React team described the distinction in its React 19 announcement, published December 5, 2024: “The use API can only be called in render, similar to hooks. Unlike hooks, use can be called conditionally.” Read the React 19 announcement.
This does not mean every function whose name begins with use can be conditional. The exception is specific to React’s use API.
#1 Best Overall
Which calls can be conditional?
| Call | Conditional or loop call? | Why |
|---|---|---|
use(resource) |
Allowed during render | React explicitly exempts this API from the ordinary call-order rule. |
useState, useEffect, useMemo, useContext, and custom Hooks |
Not allowed | They must keep a consistent call order across renders. |
The React Rules of Hooks and the eslint-plugin-react-hooks rules documentation spell out the distinction: conditional and loop calls to use are allowed, but ordinary Hooks must remain at the top level.
How to read context after an early return
use(Context) reads a context value similarly to useContext(Context), but it can appear after an early return or inside a condition. That can help when a component only needs the context on one render path:
function Heading({ children }) {
if (children == null) {
return null;
}
const theme = use(ThemeContext);
return <h1 className={theme}>{children}</h1>;
}By contrast, putting useContext after that return would violate the ordinary Hook rule. Do not replace every useContext call with use; use the exception when the control flow and API call for it.
Recommended Free Tools
What happens when use() reads a Promise?
use(promise) returns the Promise’s resolved value. If the Promise is still pending, the component suspends until it settles. The nearest applicable <Suspense> boundary above the component determines where React displays a fallback. If the Promise rejects, the error propagates to the nearest Error Boundary.
- Pending Promise: use a Suspense boundary to provide the loading fallback.
- Rejected Promise: use an Error Boundary to handle the error.
- Do not catch the rejection around
use: React forbids puttinguseinsidetry/catch.
React’s React 19 release guidance also warns that creating a Promise during Client Component or Hook render is unsupported unless it comes from a Suspense-compatible library or framework that caches Promises. Pass a cached Promise from such a system instead. See the React 19 release guidance.
How Server and Client Components handle Promises
A Server Component can use await directly while rendering, or pass a Promise down for a deeper Server Component to await. A Client Component cannot use await during render; it can receive a Promise and unwrap it with use. In either case, the component suspends where the Promise is read, so the location of the relevant Suspense boundary affects which part of the interface waits. React’s use reference explains the API and its rendering behavior.
Why does React say “Rendered fewer hooks than expected”?
This error commonly appears when a render path skips an ordinary Hook that ran on another render—for example, when a Hook is placed after a conditional return. React then sees a different sequence of ordinary Hook calls. The same underlying problem can arise if a conditional or loop changes the number or order of ordinary Hook calls.
Move ordinary Hooks to the component’s top level, before conditional returns. If the behavior should vary, conditionally use the value or run the behavior after the Hook call rather than conditionally calling the Hook itself. A conditional call to use(resource) is permitted, but that does not make conditional calls to other Hooks valid.
Best Value
How to check your code
Use the eslint-plugin-react-hooks rules documentation and linting support to check Hook placement. The rules still flag conditional ordinary Hooks while allowing conditional or loop calls to use; they also note the rendering and try/catch restrictions. For Promise-based reads, check separately that the Promise is cached by a Suspense-compatible source and that the relevant Suspense and Error Boundaries are in place.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
