React Best Practices

Load this when you're touching React components and want to avoid the most common pitfalls, especially overusing useEffect. It treats effects as escape hatches for external systems only and walks you through a decision tree for hooks, refs, and state management. The guidance on when NOT to use effects (derived state, expensive calculations, prop-driven resets) is honestly more valuable than the when-to-use part. Pair it with the TypeScript skill since most modern React is typed. Also covers component composition patterns and has specific advice against building config-driven mini-frameworks when plain JSX would do.

skills.sh installs: 3K
GitHub stars: 51
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add 0xbigboss/claude-code --skill react-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

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 key prop
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

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).

SKILL.md on GitHub