SKILL.md
React 19 Best Practices
Comprehensive React 19/19.2 best-practices guide for AI agents. Contains 49 rules across 9 categories, prioritized by impact from critical (concurrent rendering, server components) through to cross-cutting codebase hygiene (dedup, dead code, boundary coherence). Reflects React 19 headline changes: ref as a regular prop (forwardRef deprecated), native document metadata, resource preload APIs, useActionState, useOptimistic, use() hook, and <Context> as provider.
Rule files describe pattern shapes (not API names) and open with a "Shapes to recognize" section listing 2–4 syntactic disguises the same break can wear. Selected high-value rules (those whose disguises are most common in real codebases — form actions, ref-as-prop, derived state, context, the use() hook, useCallback/memo pairing) include an extra concrete "In disguise" incorrect/correct example pair to teach pattern detection beyond the grep-friendly cases.
When to Apply
- Writing new React components or refactoring existing ones
- Auditing or modernizing a directory, PR, or whole repository (see
references/_review-algorithm.mdfor the required procedure) - Migrating from React 18 to React 19 (forwardRef → ref-as-prop,
<Context.Provider>→<Context>,useFormState→useActionState) - Optimizing re-render performance or bundle size
- Using concurrent features (useTransition, useDeferredValue, Activity)
- Setting up Server Components or server/client boundaries
- Implementing form actions, optimistic updates, or data fetching
- Configuring React Compiler for automatic memoization
- Reviewing React code for common anti-patterns or outdated React 18 idioms
- Finding codebase-level issues that single-file rules can't see: duplicated logic across files, near-duplicate components, dead code,
'use client'files that don't need the client, prop-shape drift (see Category 9)