What is the use() hook in React 19?

The use() hook allows you to read the value of a resource (Promise or Context) during render, with Suspense integration.

#### Reading Promises

     import { use, Suspense } from 'react';

     function UserProfile({ userPromise }) {
       const user = use(userPromise); // Suspends until resolved
       
       return (
         <div>
           <h1>{user.name}</h1>
           <p>{user.email}</p>
         </div>
       );
     }

     function App() {
       const userPromise = fetchUser(123);
       
       return (
         <Suspense fallback={<div>Loading...</div>}>
           <UserProfile userPromise={userPromise} />
         </Suspense>
       );
     }
     

#### Reading Context

     import { use } from 'react';
     import { ThemeContext } from './context';

     function Button() {
       const theme = use(ThemeContext);
       return <button className={theme}>Click me</button>;
     }
     

#### Key Differences from Other Hooks

| Feature | use() | useContext() | useState() |
|---------|-------|--------------|------------|
| Can be called conditionally | ✅ Yes | ❌ No | ❌ No |
| Can be called in loops | ✅ Yes | ❌ No | ❌ No |
| Suspends for Promises | ✅ Yes | ❌ N/A | ❌ N/A |
| Reads Context | ✅ Yes | ✅ Yes | ❌ N/A |

#### Conditional Usage (Unique!)

     function Component({ showUser, userPromise }) {
       // ✅ This is allowed with use()!
       const user = showUser ? use(userPromise) : null;
       
       return user ? <div>{user.name}</div> : <div>No user</div>;
     }