What is the use Hook?

The use hook lets you unwrap promises, context values, or other resources in a declarative way. It integrates deeply with React’s Suspense and automatically handles loading and error states.

Unlike useEffect, which reacts to changes after rendering, use is synchronous during rendering. It tells React to suspend the component until the data is available.

How It Works

Here’s the basic idea:

1
import { use } from 'react';
2

3
function Profile({ userPromise }: { userPromise: Promise<User> }) {
4
  const user = use(userPromise);
5
  return <h1>{user.name}</h1>;
6
}

No useEffect, no useState. Just use and go. It simplifies code, making it easier to read and maintain.

Real-World Use Cases

1
import { use } from 'react';
2
import { getUser } from './lib/data';
3

4
export default function UserCard({ id }: { id: string }) {
5
  const user = use(getUser(id));
6
  return <div>{user.name}</div>;
7
}

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

4
function ThemeText() {
5
  const theme = use(ThemeContext);
6
  return <p style={{ color: theme.text }}>{theme.name}</p>;
7
}

1
import { use } from 'react';
2
import { configPromise } from './config';
3

4
export function ConfigSection() {
5
  const config = use(configPromise);
6
  return <pre>{JSON.stringify(config, null, 2)}</pre>;
7
}

1
import { use } from 'react';
2

3
const expensiveDataPromise = fetchExpensiveData();
4

5
export default function DeferredChart() {
6
  const data = use(expensiveDataPromise);
7
  return <Chart data={data} />;
8
}

Benefits

• Automatic Suspense: Let React pause rendering while data loads.
• No Boilerplate: Fewer lines of code for async logic.
• Cleaner Mental Model: One consistent way to unwrap async values.
• Server-First Friendly: Works beautifully in Server Components.

⚠️ Caveats

• Only usable in environments that support React 19+.
• Not supported in Client Components (yet).
• Requires Suspense boundaries for proper handling.

Experimental Usage with Server Actions

1
import { use } from 'react';
2
import { submitForm } from './actions';
3

4
export function ServerForm({ formPromise }: { formPromise: Promise<FormResult> }) {
5
  const result = use(formPromise);
6
  return <p>{result.success ? 'Success' : 'Failed'}</p>;
7
}

Final Thoughts

React’s use hook brings us closer to the ideal of truly declarative data fetching and state resolution. It removes the ceremony of lifecycle hooks and enhances composability across your components.

If you’re adopting React 19 or exploring Server Components, this hook is your new best friend. Give it a shot — you might never go back.