React "use"

 use – React

use is a React API that lets you read a resource during rendering, such as a Promise or context.

const value = use(resource);

• Reference
• use(context)
• use(promise)
• use(browser())

The use API was introduced in React 19 to simplify how asynchronous resources and context are consumed during rendering.

---

Why use Was Added

Before React 19, reading asynchronous data or consuming context had rigid limitations:

• Strict Rules of Hooks: Traditional React Hooks like useContext or useEffect must be called unconditionally at the top level of a component. You could not place them inside if statements, loops, or early returns.
  
  
• Complex Data Fetching in Client Components: Handling async data fetching on the client typically required cumbersome boilerplate using useEffect and multiple state variables (data, isLoading, error), which often led to race conditions and waterfall requests.
  
  
• Server-to-Client Data Streaming: With React Server Components (RSC), there was no standard mechanism to pass an in-flight server promise to a Client Component and suspend rendering until the data resolved.
  
  

use solves these issues by providing a flexible API that integrates directly with React's Suspense and Error Boundary systems.

---

What use Does

use allows a component to synchronously read the value of a resource—specifically Promises or Context—directly during rendering.

1. Flexibility: Unlike standard hooks, use can be called conditionally inside if statements, for loops, or after early returns.
   
   
2. Unwraps Promises: When passed a Promise, use suspends rendering until the Promise resolves, then returns its resolved value. If the Promise rejects, it triggers the nearest Error Boundary.
   
   
3. Consumes Context: When passed a React Context, it retrieves the context value just like useContext, but with the ability to be called conditionally.
   
   

---

How use Works

While use behaves similarly to a Hook, use is an API, not a Hook. This difference is key to how React handles it under the hood:

1. Consuming Promises (use(promise))

When React renders a component calling use(promise):

• Pending: If the Promise is still pending, use throws a special internal signal (or "suspense exception") that pauses rendering for that subtree and displays the nearest `` fallback UI.
  
  
• Fulfilled: Once the Promise resolves, React retries rendering the component. use reads the resolved value synchronously and returns it.
  
  
• Rejected: If the Promise fails, use throws the rejection reason, delegating error handling to the nearest ``.
  
  

Important Rule: Promises passed to use must be cached (e.g., via a framework loader, a Server Component prop, or a cache layer like React's cache). Creating a new Promise directly inside the render body will cause React to recreate the Promise on every render and loop endlessly on the Suspense fallback.

JavaScript

import { use, Suspense } from 'react';

// Client component unwraps a cached Promise passed from a server component or cache layer
function UserProfile({ userPromise }) {
  const user = use(userPromise); // Suspends until userPromise resolves
  return  {user.name};
}export default function App({ userPromise }) {
   return ( Loading profile...
    }>);
}

#### 2. Consuming Context (`use(context)`)
When passed a React Context, `use` searches up the component tree to locate the closest context provider for that context and returns its current value.

```jsx
import { use } from 'react';

function Navigation({ isLoggedIn }) {
  // Conditionally read context based on runtime state
  if (isLoggedIn) {
    const userTheme = use(UserThemeContext);
    return ;
  }
  
  return ;
}