React 19.2 Core Features

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

• fuse-ai-pilot:explore-codebase - Analyze existing React patterns and component structure

• fuse-ai-pilot:research-expert - Verify latest React 19.2 docs via Context7/Exa

• 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/optimistic-update.md

useActionState

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

→ See references/templates/action-form.md

useEffectEvent (19.2)

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

• Data fetching: Use use()

• Suspense, NOT useEffect

• Forms: Use Actions + useActionState

• Optimistic UI: Use useOptimistic for instant feedback

• Tabs/Modals: Use <Activity> to preserve state

• Effect events: Use useEffectEvent for non-reactive callbacks

• 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 (19.1+), 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>