react-patterns

React Patterns

Idiomatic React 18/19 patterns for building robust, accessible, performant component trees.

When to Activate

• Writing or modifying React function components, custom hooks, or component trees
• Reviewing JSX/TSX files
• Designing state shape or component composition
• Migrating class components or older forwardRef/useEffect-heavy code
• Choosing between local state, lifted state, context, and external stores
• Working with Server Components / Client Components (Next.js App Router, RSC)
• Implementing forms with React 19 actions or controlled inputs
• Wiring data fetching with TanStack Query / SWR / RSC

Core Principles

1. Render is a Pure Function of Props and State

// Good: derive during render
function Cart({ items }: { items: CartItem[] }) {
  const total = items.reduce((sum, i) => sum + i.price * i.qty, 0);
  return <span>{formatMoney(total)}</span>;
}

// Bad: derived state stored separately
function Cart({ items }: { items: CartItem[] }) {
  const [total, setTotal] = useState(0);
  useEffect(() => {
    setTotal(items.reduce((sum, i) => sum + i.price * i.qty, 0));
  }, [items]);
  return <span>{formatMoney(total)}</span>;
}

Derived state in useEffect adds a render cycle, can desync, and obscures the data flow.

2. Side Effects Outside Render

Effects, mutations, network calls, and subscriptions live in event handlers or useEffect — never in the render body.

3. Composition Over Inheritance

React has no inheritance model for components. Compose with children, render props, or component props.

Hooks Discipline

See rules/react/hooks.md for the full ruleset. Highlights:

• Top-level only, never conditional
• Cleanup every subscription, interval, listener
• Functional updater (setX(prev => prev + 1)) when new state depends on old
• Default position: do not memoize — add useMemo/useCallback only when a profiler or a dependency chain proves it matters
• Extract a custom hook only when the same hook sequence appears in 2+ components