React

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.md` for 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)

How to Review or Refactor a Codebase

When the user asks to review, refactor, modernize, or audit React code — single file or whole repo — follow [`references/_review-algorithm.md`](references/_review-algorithm.md). Do not improvise.

Four non-negotiables from that doc:

1. Two modes — never refuse a whole-repo audit. Pick Mode A (scoped, ≤~20 files) or Mode B (whole-tree: inventory pass + targeted sweeps + full Category 9). The algorithm tells you how to handle "audit my codebase" without dumping 800 files into context.
2. Judgment over grep. Each rule names a pattern shape, not a syntactic marker. Read each rule's Shapes to recognize section before sweeping — grep finds the easy violations and misses the high-value ones (a manually-drilled callback ref because the author dodged forwardRef; an onSubmit doing the work of useActionState; a useState+useEffect shaped like derived state; a custom hook hiding the fetch dance). Grep is a trigger, never a verdict.
3. Category-major, not file-major — with forcing functions. Sweep one category at a time across all in-scope files in priority order (CRITICAL → … → CROSS-CUTTING). The algorithm requires a scope declaration, per-category progress lines, and a final coverage table (category × file, cells ∈ {clean, N findings, n/a}). A missing category in the output is immediately visible.
4. Codebase-level findings come from Category 9. Single-file rules can't tell you "these two components should be one" or "this hook is dead." Category 9 (Codebase Hygiene) sweeps the full inventory at the end and produces remove / dedup / reuse / consolidate findings.

Single-file ad-hoc questions ("is this hook OK?") can go straight to the relevant rule. The algorithm exists for the multi-file and whole-repo cases.

Rule Categories

Quick Reference

Critical patterns — get these right first:

• Fetch data in Server Components, not Client Components
• Push 'use client' boundaries as low as possible
• Use startTransition for expensive non-blocking updates
• Use <Activity> to preserve state across tab/page switches

React 19 modern idioms (do NOT generate React 18 patterns):

• function C({ ref, ...props }) — never wrap in forwardRef
• <MyContext value={v}> — never use <MyContext.Provider>
• useActionState — never use useFormState
• useRef<T>(null) — always pass an initial value
• Render <title>, <meta>, <link> inline — never reach for react-helmet
• preload/preconnect from react-dom — never hand-render <link rel="preload">

Common single-file mistakes — avoid these anti-patterns:

• Creating promises inside Client Components for use() (causes infinite loops)
• Memoizing everything (use React Compiler v1.0+ instead)
• Using effects for derived state, mutations, parent notifications, or app init
• Placing 'use client' too high in the component tree

Codebase-level patterns — surface these in Category 9 sweeps:

• Components/hooks/utilities with zero importers — delete
• 2+ files with the same effect/state shape — extract a shared hook
• 2+ structurally identical components with drift in labels/icons — consolidate with variants or composition
• 'use client' files whose hook usage doesn't require client execution — demote to Server Components (or split into server parent + client island)
• Same conceptual prop carried under different names across components — converge on a canonical name

Table of Contents

1. Concurrent Rendering — CRITICAL

• 1.1 Preserve hidden subtree state across navigation instead of unmounting — HIGH (<Activity>)
• 1.2 Keep previous content visible across navigation by wrapping the update in a transition — HIGH
• 1.3 Trust automatic batching — don't reach for flushSync or unstable_batchedUpdates — HIGH
• 1.4 Defer a value you don't own when it drives an expensive child re-render — CRITICAL (useDeferredValue)
• 1.5 Mark expensive state updates as low-priority so input stays responsive — CRITICAL (useTransition)
• 1.6 Keep render pure — never mutate, subscribe, or read external state during render — MEDIUM-HIGH

1. Server Components — CRITICAL

• 2.1 Quarantine browser-API-dependent libraries inside Client Component wrappers — MEDIUM-HIGH
• 2.2 Split slow async work behind its own Suspense boundary so fast content streams first — MEDIUM-HIGH