react

React

Load this file by default for any .tsx or .jsx task. Pull refs only when the task explicitly requires that depth — see the References section.

P0 — Hook Correctness

• Dependency arrays must be exhaustive (exhaustive-deps). Never suppress the linter to silence a warning — fix the logic.
• Objects, arrays, and functions in dependency arrays: first move creation inside the effect, hoist constants, or remove the effect. Use useMemo/useCallback only when identity stability is required or measured work is expensive.
• useEffect is for syncing with external systems only. Derived data belongs in render; event-specific logic belongs in event handlers. Prefer framework data APIs, route loaders, TanStack Query, or SWR over raw fetch effects when available.
• Effects must clean up subscriptions, timers, and event listeners. Use AbortController for cancellable fetches and stale-response guards for non-abortable async work.
• Never call hooks inside conditions, loops, nested functions, event handlers, class components, callbacks passed to hooks, try/catch/finally, or after a conditional return.
• Do not use useEffect to sync derived state — compute it during render instead.
• Lazy-initialize expensive state: useState(() => compute()).
• useMemo and useCallback: measure before adding. React Compiler may reduce manual memoization; keep manual memoization where identity is observable or profiling proves value.
• useRef for mutable values that must not trigger re-renders (DOM nodes, timers, previous-value tracking).
• useTransition / useDeferredValue for non-blocking UI updates that should not block input.
• React 19+: use useEffectEvent for effect-local callbacks that need latest committed values without re-synchronizing the effect. Do not use it to hide real dependencies. For older React or non-effect callbacks, use the latest-ref pattern.

P0 — Component Basics

• Function components only. No class components.
• One exported component per file; keep small helper components module-local when they only serve that file. Prefer named exports. PascalCase names.
• Treat ~250 lines as a review smell, not a hard rule. Split by responsibility before a component accumulates unrelated state, effects, or rendering branches.
• No nested component definitions — define at module scope.
• Use stable IDs as list keys; never use array index.
• Use useId for generated accessibility IDs; never use it for list keys.
• Prefer ternary (cond ? <A /> : <B />) over && for conditional rendering — && renders 0 when the left side is falsy.
• Define event handlers before the return statement; avoid non-trivial inline arrow functions in JSX props.
• Do not thread props through components that do not use them — use composition, Context API, or a state manager when state crosses several layers.
• Custom accordions, dialogs, menus, tabs, and compound widgets must implement keyboard interaction, focus management, and ARIA semantics or use a proven accessible primitive.