react-best-practices

# 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 ## When to Use Effects Synchronizing with **external systems**: browser APIs (WebSocket, IntersectionObserver), third-party non-React libraries, window/document event listeners, non-React DOM elements (video, maps). ## When NOT to Use Effects - Derived state — calculate during render - Expensive calculations — use `useMemo` - Resetting state on prop change — use `key` prop - Responding to user events — use event handlers - Notifying parent of state changes — update both in the same event handler - Chains of effects — calculate der...