React 19.2 Core Features

Agent Workflow (MANDATORY)

TeamCreate

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

What's New in React 19.2

New Hooks

use()

references/new-hooks.md

useOptimistic

references/new-hooks.md

useActionState

references/new-hooks.md

useFormStatus

references/new-hooks.md

useEffectEvent

references/new-hooks.md

references/new-hooks.md

Classic Hooks (React 18+)

State Hooks

useState

references/use-state.md

react-state

Effect Hooks

useEffect

references/use-effect.md

useLayoutEffect

references/use-layout-effect.md

Ref Hooks

useRef

references/use-ref.md

useImperativeHandle

references/use-imperative-handle.md

Performance Hooks (Rare with Compiler)

useMemo

references/use-memo.md

useCallback

references/use-callback.md

Other Hooks

useId

references/use-id.md

useSyncExternalStore

references/use-sync-external-store.md

Custom Hooks

references/custom-hooks-patterns.md

references/templates/custom-hooks.md

Activity Component (19.2)

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

references/activity-component.md

React Compiler (19.1+)

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

references/react-compiler.md

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)
}

references/templates/use-promise.md

useOptimistic

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

references/templates/optimistic-update.md

useActionState

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

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

references/new-hooks.md

Breaking Changes from 18

ref

forwardRef

Context

<Context value={}>

useFormStatus

react-dom

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

templates/action-form.md

templates/optimistic-update.md

templates/activity-tabs.md

templates/use-promise.md

Classic Hooks Patterns

templates/state-patterns.md

templates/effect-patterns.md

templates/ref-patterns.md

templates/custom-hooks.md

templates/external-store.md

Performance Patterns

templates/virtual-list.md

templates/lazy-components.md

templates/profiling-devtools.md

Performance

Virtualization

references/virtualization.md

Lazy Loading

references/lazy-loading.md

Profiling

references/profiling.md

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>