react-best-practices

Overview

A Claude Code skill that provides React patterns for hooks, effects, refs, and component design with a strong emphasis on the principle that effects are escape hatches, not default tools. It covers when to use and when not to use effects, promoting derived state calculation during render, useMemo for expensive operations, and key-based state resets instead of effect-driven updates.

Key Features

• Effects as Escape Hatches - Core teaching that effects should only synchronize with external systems (WebSocket, browser APIs, third-party libraries), not manage derived state or event handling
• Anti-Pattern Prevention - Explicitly documents bad patterns (effect for derived state, effect for event handling, effect for state reset) with correct alternatives
• TypeScript Integration - Designed to work alongside a typescript-best-practices skill for complete type-safe React development
• Key-Based State Reset - Teaches using React key prop to reset component state on prop changes instead of effects
• useMemo Guidance - Provides correct patterns for expensive calculations using useMemo instead of effect-based caching

Who is this for?

This skill is designed for React developers who want to write cleaner, more performant components by reducing unnecessary effect usage. It is particularly valuable for teams whose components suffer from excess re-renders, stale state bugs, or overly complex effect chains, and who want AI assistance that enforces modern React patterns.