React Best Practices

Apply these guidelines when writing or reviewing React code.

Reference Files

Read ALL relevant references in the same turn, in parallel. Cite them when giving feedback:

• Effect patterns: When you don't need an Effect, dependency rules, cleanup, subscriptions, useSyncExternalStore, one-time initialization
• Re-render optimization: memo/useMemo/useCallback, derived state, functional updates, lazy init, useDeferredValue, startTransition, useEffectEvent
• Component patterns: Refs, useImperativeHandle, custom hook rules, controlled vs. uncontrolled, composition over prop drilling, flushSync
• Data fetching: Parallelizing requests, Suspense boundaries, use() and stable promise sources, request deduplication, passive listeners, localStorage versioning
• Rendering performance: content-visibility, hydration mismatches, resource hints, script loading, SVG animation, Activity, useTransition
• JS performance: Layout thrashing, Set/Map lookups, index maps, single-pass iteration, toSorted, requestIdleCallback
• Actions: <form action>, useActionState, useFormStatus, useOptimistic — pending, error, and optimistic state for mutations
• React 19 migration: Upgrading from 18 — root API, findDOMNode, forwardRef, defaultProps, legacy context, string refs, propTypes, JSX transform, TypeScript types, act/test-utils, StrictMode test counts

You Might Not Need an Effect