React Senior Guide

Overview

Comprehensive React reference that routes to specialized skills. Use this as an entry point — it tells you which skill to read for your specific situation.

Skill Router

I need to...	Read
Decide if useCallback is needed	`react-usecallback`
Decide if useMemo is needed	`react-usememo`
Use Context / optimize re-renders / compound components	`react-usecontext`
Choose between useRef and useState	`react-useref`
Know if useEffect is the right tool	`react-useeffect`
Choose a component pattern (hooks, compound, headless...)	`react-design-patterns`
Review code for bugs and anti-patterns	`react-anti-patterns`
Optimize render performance	`react-usememo` + `react-usecallback`
Decide between useState vs useReducer vs useRef	`react-useref` + `react-anti-patterns`
Integrate external library (D3, maps, charts)	`react-useref` + `react-useeffect`

Cross-Cutting Principles

1. Derive, Don't Sync

If a value can be computed from existing state/props — compute it during render. Never sync derived values via useEffect + setState.

// ❌ useEffect to "sync" derived state
useEffect(() => { setFullName(`${first} ${last}`); }, [first, last]);

// ✅ Compute during render
const fullName = `${first} ${last}`;

2. Events for Actions, Effects for Visibility

User did something → event handler
Component appeared on screen → useEffect

3. Measure Before Optimizing

Never add useMemo/useCallback/memo "just in case". Profile with React DevTools first. The only exception: useMemo on Context Provider value (well-understood, predictable benefit).

4. Reference Stability Matters for Objects, Not Primitives

React compares primitives (string, number, boolean) by value. Memoizing them is pointless. Objects and arrays are compared by reference — that's where useMemo/useCallback matter.

5. State Should Be Minimal

Store IDs, not copies of objects (derive from source of truth)
Use union types for status, not multiple booleans
Related fields → one useState object or useReducer
If it doesn't affect UI → useRef, not useState

6. React Compiler (2025+)

React Compiler auto-memoizes. If you're using it, don't add manual useCallback/useMemo unless you hit a measured issue or work with uncompiled external libraries.

AI Code Review Checklist

Run this checklist on any AI-generated React code:

#	Check	Anti-pattern
1	Is `useEffect` doing derived state computation?	Compute during render
2	Is `useEffect` missing a cleanup return?	Add cleanup
3	Is `fetch` in useEffect without AbortController/ignore?	Add race condition protection
4	Are list keys using `index`?	Use stable IDs
5	Is state initialized from props and synced via effect?	Use controlled/uncontrolled + key
6	Is `useCallback` used without `memo()` on child?	Remove useCallback or add memo
7	Is server data fetched manually instead of React Query?	Use React Query
8	Are loading/error/empty states handled?	Add all states
9	Are multiple boolean flags used for status?	Use union type
10	Are components defined inside other components?	Move outside
11	Is state mutated directly?	Create new references
12	Are full objects stored in state (duplicated)?	Store IDs, derive objects
13	Is `&&` used with numbers that could be 0?	Use `> 0 &&` or ternary
14	Are hooks called conditionally or after early returns?	All hooks at top
15	Is one mega-context holding all app state?	Split into separate contexts
16	Is a closure capturing stale state in setTimeout/setInterval/async?	Use ref for current value
17	Are 5+ related useState calls used instead of useReducer?	Use useReducer or combined state
18	Is one component >200 lines mixing fetch + logic + UI?	Split into focused components

Pattern Decision Flowchart

Need reusable logic?
  ├─ Yes → Custom Hook
  │         ├─ Components always used together?
  │         │    └─ Yes → Compound Components
  │         └─ Need logic without imposed HTML/styling?
  │              └─ Yes → Headless Component
  └─ No
      ├─ Need crash isolation? → Error Boundary
      ├─ Need to escape DOM parent? → Portal
      ├─ Need to share stable global state? → Context Provider
      └─ Need full render control from parent? → Render Props

References

React Compiler — official guide on auto-memoization
Understanding useMemo and useCallback — Josh Comeau's definitive memoization guide
You Might Not Need an Effect — React docs — the most impactful page for AI code review