React Best Practices

Pair with TypeScript

When working with React, always load both this skill and typescript-best-practices together. TypeScript patterns (type-first development, discriminated unions, Zod validation) apply to React code.

Core Principle: Effects Are Escape Hatches

Effects let you "step outside" React to synchronize with external systems. Most component logic should NOT use Effects. Before writing an Effect, ask: "Is there a way to do this without an Effect?"

Decision Tree

1. Need to respond to user interaction? Use event handler
2. Need computed value from props/state? Calculate during render
3. Need cached expensive calculation? Use useMemo
4. Need to reset state on prop change? Use key prop
5. Need to synchronize with external system? Use Effect with cleanup
6. Need non-reactive code in Effect? Use useEffectEvent
7. Need mutable value that doesn't trigger render? Use ref