/react-19

name: react-19
description: Use when implementing React 19.2 patterns — use(), useOptimistic, useActionState, useEffectEvent, Activity component, React Compiler.
version: 19.2.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.2's new 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, 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.2 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.2 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.2

New Hooks

| 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 (19.2)

Hide/show components while preserving state:

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

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

React Compiler (19.1+)

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

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

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

→ See `references/templates/opti