react-19

What this skill does

# 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:

```typescript
<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

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

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

→ See `references/templates/optimistic-update.md`

### useActionState

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

→ See `references/templates/action-form.md`

### useEffectEvent (19.2)

```typescript
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>`