React 19

---
name: react-19
description: Use when implementing React 19.3 patterns — use(), useOptimistic, useActionState, useEffectEvent, Activity, ViewTransition, Fragment refs, use(browser()), React Compiler.
version: 19.3.0
user-invocable: true
references: references/new-hooks.md, references/activity-component.md, references/actions-api.md, references/react-compiler.md, references/ref-as-prop.md, references/context-improvements.md, references/suspense-patterns.md, references/document-metadata.md, references/resource-loading.md, references/migration-18-19.md, references/virtualization.md, references/lazy-loading.md, references/profiling.md, references/templates/action-form.md, references/templates/optimistic-update.md, references/templates/activity-tabs.md, references/templates/use-promise.md, references/templates/use-context.md, references/templates/use-effect-event.md, references/templates/error-boundary.md, references/templates/ref-as-prop.md, references/templates/document-metadata.md, references/templates/resource-loading.md, references/templates/virtual-list.md, references/templates/lazy-components.md, references/templates/profiling-devtools.md, references/hooks-improved.md, references/templates/use-deferred-value.md, references/templates/use-transition-async.md, references/use-state.md, references/use-effect.md, references/use-ref.md, references/use-memo.md, references/use-callback.md, references/use-layout-effect.md, references/use-id.md, references/use-imperative-handle.md, references/use-sync-external-store.md, references/custom-hooks-patterns.md, references/templates/state-patterns.md, references/templates/effect-patterns.md, references/templates/ref-patterns.md, references/templates/custom-hooks.md, references/templates/external-store.md
---

<objective>
Covers React 19.3's hooks and features: `use()` for reading promises/context in render, `useOptimistic` for instant UI updates, `useActionState` for form action state, `useFormStatus` for child-component pending state, `useEffectEvent` for non-reactive effect callbacks, the `Activity` component for hiding/showing UI while preserving state, `<ViewTransition>` + `addTransitionType` animations, Fragment refs and `use(browser())` browser-only rendering (new in 19.3), and the React Compiler's automatic memoization (making manual `useMemo`/`useCallback` mostly obsolete).

Also documents all classic hooks (useState, useEffect, useLayoutEffect, useRef, useImperativeHandle, useMemo, useCallback, useId, useSyncExternalStore) and React 18→19 breaking changes (`ref` as a prop instead of `forwardRef`, `<Context value={}>` instead of `<Context.Provider>`). This is the core React hooks/features skill — for global state see react-state, for forms see react-forms, and for SOLID architecture rules see solid-react.
</objective>

# React 19.3 Core Features

## Agent Workflow (MANDATORY)

Before ANY implementation, spawn 3 agents in parallel, one `Agent` call each with a `name`:

1. **fuse-ai-pilot:explore-codebase** - Analyze existing React patterns and component structure
2. **fuse-ai-pilot:research-expert** - Verify latest React 19.3 docs via Context7/Exa
3. **mcp__context7__query-docs** - Check use(), useOptimistic, useActionState, Activity patterns

After implementation, run **fuse-ai-pilot:sniper** for validation.

---

## What's New in React 19.3

Stable in 19.3 (react/react-dom 19.3.0, 2026-09-09; `@types/react` 19.3 needs TypeScript ≥ 5.6):

| API | Purpose | Guide |
|-----|---------|-------|
| `<ViewTransition>` | Animate enter/exit/update/share via the browser View Transition API | `references/suspense-patterns.md` |
| `addTransitionType(type)` | Tag a Transition to pick a different animation | `references/suspense-patterns.md` |
| `<Fragment ref>` | `FragmentInstance` (events, focus, observers) without a wrapper `<div>` | `references/ref-as-prop.md` |
| `use(browser(reason?))` (`react-dom`) | Browser-only rendering: suspends on the server, Suspense fallback in HTML | `references/new-hooks.md` |

Behaviour changes: Transitions no longer entangle, StrictMode double-invokes effects during hydration, DEV warning on conditional `use()` unblocking → `references/migration-18-19.md`.

**RSC security:** `react-server-dom-*` must be ≥ 19.2.4 (CVE-2025-55182 RCE and follow-up DoS CVEs); prefer ≥ 19.2.7 or 19.3.0.

### New Hooks (19.0–19.2)

| Hook | Purpose | Guide |
|------|---------|-------|
| `use()` | Read promises/context in render | `references/new-hooks.md` |
| `useOptimistic` | Optimistic UI updates | `references/new-hooks.md` |
| `useActionState` | Form action state management | `references/new-hooks.md` |
| `useFormStatus` | Form pending state (child components) | `references/new-hooks.md` |
| `useEffectEvent` | Non-reactive callbacks in effects | `references/new-hooks.md` |

→ See `references/new-hooks.md` for detailed usage

---

## Classic Hooks (React 18+)

### State Hooks

| Hook | Purpose | Guide |
|------|---------|-------|
| `useState` | Local component state | `references/use-state.md` |

→ For global state, see `react-state` skill

### Effect Hooks

| Hook | Purpose | Guide |
|------|---------|-------|
| `useEffect` | Side effects after paint | `references/use-effect.md` |
| `useLayoutEffect` | Sync DOM before paint | `references/use-layout-effect.md` |

### Ref Hooks

| Hook | Purpose | Guide |
|------|---------|-------|
| `useRef` | DOM access, mutable values | `references/use-ref.md` |
| `useImperativeHandle` | Customize ref API | `references/use-imperative-handle.md` |

### Performance Hooks (Rare with Compiler)

| Hook | Purpose | Guide |
|------|---------|-------|
| `useMemo` | Memoize expensive values | `references/use-memo.md` |
| `useCallback` | Memoize functions | `references/use-callback.md` |

→ React Compiler handles most memoization automatically

### Other Hooks

| Hook | Purpose | Guide |
|------|---------|-------|
| `useId` | Unique IDs for accessibility | `references/use-id.md` |
| `useSyncExternalStore` | External store subscription | `references/use-sync-external-store.md` |

### Custom Hooks

→ See `references/custom-hooks-patterns.md` for patterns
→ See `references/templates/custom-hooks.md` for implementations

---

### Activity Component (stable since 19.2)

Hide/show components while preserving state:

```typescript
<Activity mode={isActive ? 'visible' : 'hidden'}>
  <TabContent />
</Activity>
```

→ See `references/activity-component.md` for patterns

### React Compiler (1.0 stable, Oct 2025 — React 17+)

Automatic memoization - useMemo/useCallback mostly obsolete:

- Build-time optimization
- No more manual memoization in most cases
- 2.5× faster interactions reported

→ See `references/react-compiler.md` for details

---

## Quick Reference

### use() Hook

```typescript
// Read promise in render (with Suspense)
const data = use(dataPromise)

// Read context conditionally (unique to use())
if (condition) {
  const theme = use(ThemeContext)
}
```

→ See `references/templates/use-promise.md`

### useOptimistic

```typescript
const [optimisticValue, setOptimistic] = useOptimistic(actualValue)
// Update UI immediately, server updates later
```

→ See `references/templates/optimistic-update.md`

### useActionState

```typescript
const [state, action, isPending] = useActionState(asyncFn, initialState)
```

→ See `references/templates/action-form.md`

### useEffectEvent (stable since 19.2)

```typescript
const onEvent = useEffectEvent(() => {
  // Always has fresh props/state, doesn't trigger re-run
})

useEffect(() => {
  connection.on('event', onEvent)
}, []) // No need to add onEvent to deps
```

→ See `references/new-hooks.md`

---

## Breaking Changes from 18

| Change | Migration |
|--------|-----------|
| `ref` is a prop | Remove `forwardRef` wrapper |
| `Context` is provider | Use `<Context value={}>` directly |
| `useFormStatus` | Import from `react-dom` |

→ See `references/migration-18-19.md`

---

## Best Practices

1. **Data fetching**: Use `use()` + Suspense, NOT useEffect
2. **Forms**: Use Actions + useActionState
3. **Optimistic UI**: Use `useOptimistic` for instant feedback
4. **Tabs/Modals**: Use `<Activity>` to preserve state
5. **Effect events**: Use `useEffectEvent` for non-reactive callbacks
6. **Memoization**: Let React Compiler handle it

---

## Templates

### React 19 Patterns

| Template | Use Case |
|----------|----------|
| `templates/action-form.md` | Form with useActionState |
| `templates/optimistic-update.md` | useOptimistic pattern |
| `templates/activity-tabs.md` | Activity component tabs |
| `templates/use-promise.md` | use() with promises |

### Classic Hooks Patterns

| Template | Use Case |
|----------|----------|
| `templates/state-patterns.md` | useState patterns |
| `templates/effect-patterns.md` | useEffect patterns |
| `templates/ref-patterns.md` | useRef patterns |
| `templates/custom-hooks.md` | Custom hooks implementations |
| `templates/external-store.md` | useSyncExternalStore patterns |

### Performance Patterns

| Template | Use Case |
|----------|----------|
| `templates/virtual-list.md` | TanStack Virtual for long lists |
| `templates/lazy-components.md` | Code splitting and lazy loading |
| `templates/profiling-devtools.md` | React DevTools Profiler |

---

## Performance

### Virtualization
Render only visible items for large lists (100+ items).
→ See `references/virtualization.md`

### Lazy Loading
Code split routes and heavy components for smaller bundles.
→ See `references/lazy-loading.md`

### Profiling
Measure render performance with DevTools Profiler.
→ See `references/profiling.md`

**Note:** With React Compiler (1.0+), manual memo/useMemo/useCallback optimizations are mostly obsolete. Profile first to verify if optimization is needed.

---

## Forbidden (Outdated Patterns)

- ❌ `useEffect` for data fetching → use `use()` + Suspense
- ❌ `forwardRef` → use `ref` as prop
- ❌ `<Context.Provider>` → use `<Context value={}>`
- ❌ Manual useMemo/useCallback everywhere → let Compiler handle it
- ❌ Conditional rendering for state preservation → use `<Activity>`