When you use Suspense, you can use the use() hook, and pass it a promise (or other values) and React will suspend that component until the promise resolves:

<Suspense fallback={<Spinner />}>
  <Profile userId={123} />
</Suspense>

import { use } from 'react'

async function fetchUser() {
  //....
}

export function Profile({ userId }) {
  const user = use(fetchUser(userId));
  return <h1>{user.name}</h1>;
}

This is a “special” hook because hooks normally must be called at the top of a component, but use() does not have this limitation.

This new function simplifies creating smooth data loading experiences.

Lessons in this unit:

0:	Introduction
1:	Server Actions
2:	Next.js, passing an id to a server action
3:	▶︎ The use hook
4:	use() and data fetching
5:	The useFormStatus Hook
6:	The useOptimistic hook
7:	The useActionState hook
8:	How to get the Request headers in Next.js app router
9:	How to install shadcn-ui on latest Next.js beta-RC