react-best-practices
React patterns for hooks, effects, refs, and component design with escape hatch guidance.
- Effects synchronize with external systems only (WebSocket, third-party libraries, browser APIs); most component logic should avoid Effects entirely
- Common anti-patterns: derived state, expensive calculations, prop-change resets, and event handling all belong outside Effects—use render calculations, useMemo, key props, and event handlers instead
- Effect dependencies must never be suppressed; use updater functions, move objects/functions inside Effects, and useEffectEvent for non-reactive logic to keep dependency lists correct
- Always clean up subscriptions and event listeners; use ignore flags for data fetching to prevent stale updates
- Refs store mutable values that don't affect rendering; never read or write ref.current during render, only in event handlers and Effects
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
- Need to respond to user interaction? Use event handler
- Need computed value from props/state? Calculate during render
- Need cached expensive calculation? Use
useMemo - Need to reset state on prop change? Use
keyprop - Need to synchronize with external system? Use Effect with cleanup
- Need non-reactive code in Effect? Use
useEffectEvent - Need mutable value that doesn't trigger render? Use ref
More from 0xbigboss/claude-code
typescript-best-practices
Use when reading or writing TypeScript or JavaScript files (.ts, .tsx, .js, tsconfig.json).
2.1Kpython-best-practices
Use when reading or writing Python files (.py, pyproject.toml, requirements.txt).
1.3Kweb-fetch
Fetches web content as clean markdown by preferring markdown-native responses and falling back to selector-based HTML extraction. Use for documentation, articles, and reference pages at http/https URLs.
780zig-best-practices
Use when reading or writing Zig files (.zig, build.zig, build.zig.zon).
349nix-best-practices
Use when working with Nix flakes, overlays, shell.nix, or flake.nix files.
318openai-image-gen
Use when generating images, graphics, icons, or visual assets via OpenAI DALL-E 3 API. Requires OPENAI_API_KEY.
288