# React Best Practices > Use when reading or writing React components (.tsx, .jsx files with React imports). - Skill: `tomevault-io/react-best-practices-7` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/react-best-practices-7` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/react-best-practices-7/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/react-best-practices-7 --- # 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 derived state and update in one event handler ## Refs - Use for values that don't affect rendering (timer IDs, DOM node references) - Never read or write `ref.current` during render; only in event handlers and effects - Use ref callbacks (not `useRef` in loops) for dynamic lists - Use `useImperativeHandle` to limit what parent can access ## Custom Hooks - Share logic, not state — each call gets an independent state instance - Name `useXxx` only if it actually calls other hooks; otherwise use a regular function - Avoid lifecycle hooks (`useMount`, `useEffectOnce`) — use `useEffect` directly so the linter catches missing deps - Keep focused on a single concrete use case ## Component Patterns - Controlled: parent owns state; uncontrolled: component owns state - Prefer composition with `children` over prop drilling; use Context only for truly global state - Use `flushSync` when you need to read the DOM synchronously after a state update See `react-patterns.md` for code examples and detailed patterns. --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/0xbigboss) — claim your Tome and manage your conversions.