React Academy · Lesson

The use() Hook for Async Resources

Read promises and context in render with the use() hook in React 19.

The use() Hook for Async Resources is a free React Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will use React 19's use() hook to read promises and context values directly inside the render function, simplifying async data access.

What Is use()?

use() is a React 19 hook that reads a resource — either a Promise or a Context — synchronously in the render function. If the Promise is pending, the component suspends and the nearest Suspense boundary shows its fallback.

import { use } from 'react';

function UserProfile({ userPromise }) {
  const user = use(userPromise); // suspends if pending
  return <h1>{user.name}</h1>;
}

Passing Promises as Props

A common pattern in React 19: the Server Component creates a Promise (e.g. a DB query), passes it to a Client Component, and the Client Component reads it with use(). The Suspense boundary lives anywhere above.

// Server Component
export default function Page() {
  const userPromise = fetchUser(1); // NOT awaited
  return (
    <Suspense fallback={<Spinner />}>
      <Profile userPromise={userPromise} />
    </Suspense>
  );
}

// Client Component
'use client';
export function Profile({ userPromise }) {
  const user = use(userPromise);
  return <p>{user.name}</p>;
}

use() vs useEffect for Data

useEffect for data fetching requires managing loading/error state manually. use() with Suspense removes all that boilerplate — the component body just reads the data as if it were synchronous.

use() for Context

use() can also read context values, just like useContext. The difference is that use() can be called conditionally (inside if/loops) — unlike useContext which follows Rules of Hooks.

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

function Button({ danger }) {
  if (danger) {
    const theme = use(ThemeContext); // conditional — allowed with use()!
    return <button style={{ color: theme.red }}>Delete</button>;
  }
  return <button>Click</button>;
}

Error Handling with ErrorBoundary

If the Promise passed to use() rejects, React throws the error. Wrap the component with an ErrorBoundary to catch it and display a fallback.

<ErrorBoundary fallback={<Error />}>
  <Suspense fallback={<Loading />}>
    <Profile userPromise={fetchUser(id)} />
  </Suspense>
</ErrorBoundary>

use() in Client Components Only

use() with a Promise works in Client Components. In Server Components, use async/await directly — there is no need for use() with Promises on the server.

Caching Promises

If a component re-renders, it must receive the same Promise reference to avoid refetching. Create Promises outside the component or in a stable location (server, cache, or state) and pass them as props.

Streaming with use()

Combining use() with streaming SSR lets React stream the page HTML, show the Suspense fallback, then stream the resolved content once the Promise resolves — all in one HTTP connection.

React.cache() for Deduplication

On the server, React.cache() (or Next.js's unstable_cache) deduplicates multiple calls to the same async function within one render, so the database is hit only once even if multiple components use the same promise.

Quick Check

What does a Client Component do when use(promise) is called and the promise is still pending?

Recap

use(promise) reads async data synchronously in render, suspending if pending. use(context) works conditionally unlike useContext. Always pair with Suspense for loading and ErrorBoundary for errors.

Up Next

Next lesson: **React Actions & useActionState** — you will define server and client actions and handle form submissions with pending state.

Frequently asked questions

Is the “The use() Hook for Async Resources” lesson free?

Yes — the full text of “The use() Hook for Async Resources” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “The use() Hook for Async Resources”?

Read promises and context in render with the use() hook in React 19. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “The use() Hook for Async Resources” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy