using-the-use-hook

React 19's use() hook reads Promises conditionally within component logic, suspending the component until the Promise resolves. Wrap use(promise) with a Suspense boundary to display a fallback while data loads, and pair it with an Error Boundary to catch rejections.

Yes, use() enables conditional Context reads inside if statements, loops, and after early returns—patterns forbidden with useContext. This flexibility lets you fetch context values based on dynamic conditions without restructuring component logic.

Create Promises externally with a cache wrapper before passing them to use(). This prevents redundant requests and ensures the same Promise instance is reused across renders, eliminating suspense replay.

Replace useContext calls with use(context) at the top of your component. use() allows the same context access inside conditionals, loops, and after returns, eliminating the need to restructure for unconditional early reads.

use() triggers Suspense, which unwinds the call stack to the nearest Suspense boundary. Try-catch blocks intercept this mechanism, breaking error propagation. Use an Error Boundary outside the component instead to handle Promise rejections.

Yes, use() reads both Promises and Context conditionally within the same component. Promises suspend rendering; Context values resolve synchronously. Combine them with Suspense and Error Boundary to handle both async data and conditional context logic.