# React Patterns

React discipline for components, hooks, and performance.

## Rules

1. **Hooks at the top level only.** No hooks in conditions, loops, or nested functions. The rules of hooks exist because violations produce bugs that don't reproduce consistently.

2. **Composition over prop drilling.** Children as props, render props, compound components — pass components, not configuration objects through five layers.

3. **Memoize when measured, not anticipated.** `useMemo` and `useCallback` when profiling shows unnecessary re-renders. Premature memoization adds complexity without benefit.

4. **Keys are identity, not index.** List items keyed by array index break on reorder, insert, and delete. Stable unique IDs for every list.

5. **Effects have cleanup.** Subscriptions, timers, and listeners return cleanup functions. Leaked effects are memory leaks and stale state bugs.

6. **Server Components when available.** In Next.js and React 19+, default to server rendering. Client interactivity is the exception, not the baseline.

## What This Replaces

Hook violations, prop drilling through arbitrary depth, memoization everywhere, index keys in dynamic lists, and client-rendering what should be server-rendered.

## Official Source

Distilled from Vercel's React best practices skills.
Full upstream: https://officialskills.sh/vercel-labs/skills/react-best-practices