React 19

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.

React 19.2 Core Features

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

1. explore-codebase - Analyze existing React patterns and component structure
2. 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 sniper for validation.

What's New in React 19.2

New Hooks

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

Classic Hooks (React 18+)

State Hooks

→ For global state, see react-state skill

Effect Hooks

Ref Hooks

Performance Hooks (Rare with Compiler)

→ React Compiler handles most memoization automatically

Other Hooks

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

→ 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

Classic Hooks Patterns

Performance Patterns

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>