What is React's use() hook in React 19?

Why Interviewers Ask This

This is a differentiating question used for senior and lead roles. Interviewers want to see if you can explain not just what happens, but why — and what the trade-offs are in different approaches.

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.

Common Mistake

Candidates often give textbook answers here. Interviewers are more impressed when you relate the concept to a specific problem you solved in a real React.js project.