Q319: What is the use() hook in React 19? - React & Modern Frontend (445 Qs)

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

Reading Promises

jsx

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

jsx

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!)

jsx

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>;
}