React Patterns

use() Hook (React 19)

use() reads values from Promises and Context directly in render. Unlike other hooks, it can be called inside conditionals and loops.

import { use } from 'react';

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

function ThemeButton() {
  const theme = use(ThemeContext);
  return <button style={{ background: theme.primary }}>Click</button>;
}