The use hook

Dec 10, 2024

Learn how the React use() hook reads a promise inside Suspense so React suspends the component until it resolves, even when you call it conditionally.

~~~

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.

Tagged: React · All topics

~~~