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, 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

You Might Not Need an Effect

Effects are an escape hatch from React. They synchronize with external systems. If no external system is involved, you probably don't need one.