React

---
name: React
slug: react
version: 1.0.3
description: Build React applications with hooks, state management, performance optimization, and component patterns.
---

## When to Use

User needs React expertise — from component design to production patterns. Agent handles hooks, state management, rendering optimization, and data fetching.

## Quick Reference

| Topic | File |
|-------|------|
| Hooks patterns | `hooks.md` |
| State management | `state.md` |
| Performance optimization | `performance.md` |
| Component patterns | `patterns.md` |

## Common Mistakes

- `{count && <Component />}` renders "0" when count is 0 — always use `{count > 0 && <Component />}` for numeric conditions
- Never mutate state directly (`array.push()` then `setState(array)`) — React won't detect the change. Always spread: `setState([...array, item])`
- Keys generated during render (`key={Math.random()}`) destroy and recreate components every render — generate stable IDs when data is created
- Uninitialized controlled inputs (`useState()` without default) flip between controlled/uncontrolled — always initialize with empty string or appropriate default

## Hooks Traps

- `useEffect` callback cannot be async directly — define async function inside the effect and call it
- Missing cleanup in effects causes memory leaks — return cleanup function for subscriptions, intervals, and event listeners
- Dependencies array with objects/arrays triggers on every render (new reference each time) — memoize with `useMemo` or extract primitive values
- `useState` setter with same reference won't trigger re-render — for objects/arrays, always create new reference

## Performance

- Sequential awaits create waterfalls — use `Promise.all([fetchA(), fetchB()])` for independent requests
- Barrel imports (`import { X } from '@/components'`) pull entire module — use direct path imports for tree-shaking
- Expensive computations in render body recalculate every render — wrap in `useMemo` with proper dependencies
- Use `startTransition` for non-urgent UI updates (filtering, sorting large lists) — keeps input responsive while heavy renders process in background
- Use `useRef` instead of `useState` for values that don't need to trigger re-renders (timers, previous values, DOM measurements)

## State Architecture

- Colocate state as close as possible to where it's used — lifting state too high causes unnecessary re-renders in the entire subtree
- Derive values from existing state instead of syncing with useEffect — computed values don't need their own state
- When multiple state updates happen together, use `useReducer` — prevents impossible state combinations that separate `useState` calls allow
- URL search params are state too — use them for filter/sort/pagination state so users can share and bookmark

## Forms (React 19+)

- Prefer form actions over useEffect for mutations — actions handle pending states, errors, and optimistic updates built-in
- Use `useActionState` for form submission status — replaces manual loading/error state management
- `useOptimistic` updates UI immediately before server confirms — revert automatically on error

## Data Fetching Traps

- Fetching data in useEffect without abort controller — race conditions when component remounts or deps change fast
- Returning objects from custom hooks without memoizing — consumers re-render on every call even if data hasn't changed
- Using index as key in lists that reorder, filter, or insert — causes subtle bugs where component state gets attached to wrong items