# The use hook

> 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.

Author: Flavio Copes | Published: 2024-12-10 | Canonical: https://flaviocopes.com/the-use-hook/

When you use Suspense, you can use the `use()` hook, and pass it a promise (or other values) and [React](https://flaviocopes.com/react/) will suspend that component until the promise resolves:

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

```

```typescript
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.