React

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