# Using The Use Hook

> React 19's use() API for reading Promises/Context conditionally. For async data fetching, Suspense, conditional context access, useContext migration. Use when this capability is needed.

- Skill: `tomevault-io/using-the-use-hook` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/using-the-use-hook`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/using-the-use-hook/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/using-the-use-hook

---


# Using the `use()` Hook in React 19

Teaches when and how to use React 19's new `use()` API: reads Promises (suspending component) and Context (conditionally—inside if statements, loops, after early returns).

**Activates when**: User mentions `use()`, `use hook`, async patterns, Suspense + data fetching, conditional context, or useContext migration.

## Key Capabilities vs. Traditional Hooks

| Feature            | Hooks     | `use()`        |
| ------------------ | --------- | -------------- |
| Conditional calls  | ❌        | ✅             |
| After early return | ❌        | ✅             |
| Inside loops       | ❌        | ✅             |
| Read Promises      | ❌        | ✅ (suspends)  |
| Error handling     | try-catch | Error Boundary |

## Usage Patterns

**Reading Promises**:

```javascript
import { use, Suspense } from 'react';

async function fetchUser(id) {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
}

function UserProfile({ userId }) {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <UserData promise={fetchUser(userId)} />
    </Suspense>
  );
}

function UserData({ promise }) {
  const user = use(promise);
  return <div>{user.name}</div>;
}
```

**Conditional Context Access**:

```javascript
import { use, createContext } from 'react';

const ThemeContext = createContext('light');

function Button({ isPrimary, children }) {
  let className = 'button';
  if (isPrimary) {
    const theme = use(ThemeContext);
    className += ` ${theme}`;
  }
  return <button className={className}>{children}</button>;
}
```

**Reusable Custom Hook**:

```javascript
import { use, cache } from 'react';

const getUser = cache(async (id) => {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
});

function useUser(userId) {
  if (!userId) return null;
  return use(getUser(userId));
}
```

## Implementation Workflow

**Async data**: Pass Promise as prop from parent → wrap component in Suspense boundary → use `use(promise)` in child → catch errors with Error Boundary.

**Conditional context**: Replace `useContext(Context)` with `use(Context)` for flexibility across conditional branches, loops, post-early-return.

**Migration from useContext**: Find `useContext(Context)` calls → replace with `use(Context)` → benefits: now conditional if needed.

## Requirements & Validation

**MUST**:

- Wrap `use(promise)` in Suspense boundary with fallback
- Use Error Boundary (not try-catch) for error handling
- Create Promises in parents/Server Components, pass as props
- Use `cache()` wrapper to prevent duplicate requests

**NEVER**:

- Call `use()` inside try-catch blocks
- Create new Promises inside component (causes infinite loops)
- Use `use()` outside Component/Hook functions
- Omit Suspense boundary for Promises

**Verify**:

1. Suspense boundary wraps every `use(promise)` with fallback
2. Error Boundary catches Promise errors
3. Promises created externally or with `cache()`—stable across renders
4. All conditional logic branches tested

---

For comprehensive React 19 `use()` documentation:

`research/react-19-comprehensive.md` lines 241–311 (use API, Promise Patterns, useContext sections).

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/djankies) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-16 -->