What is React's use() hook in React 19?
Answer
The use() hook (React 19) is a new primitive that reads the value of a resource (a Promise or a Context) during rendering. Unlike all other hooks, use() can be called conditionally and inside loops — it is not bound by the rules of hooks in that regard. With Promises: const data = use(fetchDataPromise); — if the promise is pending, the component suspends (falls back to the nearest Suspense boundary); if resolved, returns the value; if rejected, throws to the nearest Error Boundary. This replaces the pattern of storing async data in state via useEffect. With Context: const theme = use(ThemeContext); — equivalent to useContext but callable conditionally. Server Action integration: in Next.js App Router, use() integrates with server-side data fetching, Suspense streaming, and React Server Components. Important: use() cannot be called in a try-catch or inside event handlers — only in component bodies or other hooks. It represents a fundamental shift in how React handles asynchronous data — from imperative loading state to declarative Suspense-based data fetching.
Previous
How does React handle accessibility (a11y)?
Next
What is the React Activity (Offscreen) API?
More React.js Questions
View all →- Advanced How does React's reconciliation algorithm handle keys?
- Advanced What is the React Fiber architecture in depth?
- Advanced What are React rendering optimizations beyond React.memo?
- Advanced How do you implement an undo/redo system in React?
- Advanced What are React's concurrent features and how do Transitions work?