The use() Hook: Reading Promises and Context Inside Components

Hands-on practice for this lecture. Work through the exercises and quizzes to reinforce what you've learned.

Exercise 1 of 1

use() Hook Quiz

Three questions on React 19's use() hook — Suspense integration, what makes it unique among hooks, and the difference between use() and await.

interact to see yellow flashes

import { use } from 'react';

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

What happens while userPromise is pending?

What can you pass to use() that you cannot pass to other hooks?

// Server Component
async function Page() {
  const data = await fetchData(); // await directly in server component
  return <Dashboard data={data} />;
}

// Client Component
function Dashboard({ dataPromise }) {
  const data = use(dataPromise); // use() in client component
}

When would you use use() vs await in a Server Component?

0/3 answered

💡 use() is React 19's API for reading asynchronous resources in Client Components. Its unique superpower: it can be called conditionally, unlike all other hooks.

Re-read the lecture All lectures →