react-19

name	react-19
description	React 19.2 features - use(), useOptimistic, useActionState, useEffectEvent, Activity component, React Compiler. Use when implementing React 19 patterns. Use when this capability is needed.
metadata	{"author":"fusengine"}

React 19.2 Core Features

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

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

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

---

Converted and distributed by TomeVault — claim your Tome and manage your conversions.