react

React Patterns

Reference for React-specific patterns with citations. Sources in references/sources.md.

Iron Law

COMPOSITION OVER PROPS [2][4][12]

Use children and compound components, not prop drilling. If a component has >5 props, it's doing too much. Split it. If you're passing data through 3+ levels, use context or composition. Props are for configuration, not data plumbing. "Before You memo(), try solving it with composition." — Dan Abramov [4]

When This Skill Activates

• Working with React codebases (.tsx, .jsx) — components, hooks, contexts, performance

---

Component Structure [1][2]

Functional component order: hooks → derived state → handlers → return. [1]

Compound components share structure through children, not props: [2][4]

function Card({ children }: { children: React.ReactNode }) {
  return <div className="card">{children}</div>;
}
Card.Header = ({ children }: { children: React.ReactNode }) =>
  <div className="card-header">{children}</div>;

Context for shared state across distant components — eliminates prop drilling: [1][2]

const AuthContext = createContext<AuthContextValue | null>(null);
export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
  return ctx;
}

---

Hooks [3][16][24]

Hooks must be called at the top level — never inside conditions, loops, or nested functions. [16][24] Effects synchronize with external systems; they are not lifecycle methods. [3] Every effect that subscribes must return a cleanup function. Deps must be complete — never omit to suppress warnings. [3]

See references/hooks.md for rules of hooks, custom hooks, useReducer, and effect anti-patterns.

---

Performance [3][4][5][17]

The React Compiler (2024) handles many memoizations automatically [17]. For manual optimization, follow this priority: [4]

1. Composition first — "before you memo(), try passing children down" [4]
2. Extract primitives for useEffect deps — avoid object/array literals [3]
3. useMemo for expensive computations; useCallback for stable handlers [3]
4. React.memo only when parent has stable, memoized callbacks [4]
5. Virtualize long lists (react-window) [5]; lazy-load heavy components [5]