React Code Review Guidelines

Performance optimization and correctness guide for React applications. Contains 23 rules across 4 categories, prioritized by impact.

When to Apply

Reference these guidelines when:

• Writing or reviewing React components and hooks
• Optimizing re-render performance
• Refactoring state management or effect logic
• Reviewing pull requests that touch React code

Rule Categories by Priority

Priority	Category	Impact	Prefix	Rules
1	Rules of React	CRITICAL	react-rules-	3
2	Re-render Optimization	MEDIUM	rerender-	13
3	Rendering Performance	MEDIUM	rendering-	5
4	Advanced Patterns	LOW	advanced-	2

Quick Reference

1. Rules of React (CRITICAL)

• react-rules-purity - Components and Hooks must be pure; no side effects during render
• react-rules-hooks - Only call Hooks at the top level and from React functions
• react-rules-calling - Never call components as functions or pass Hooks as values

2. Re-render Optimization (MEDIUM)

• rerender-no-inline-components - Never define components inside other components
• rerender-derived-state-no-effect - Derive state during render, not in effects
• rerender-memo - Extract memoized child components to avoid re-renders
• rerender-memo-with-default-value - Hoist default non-primitive props outside memo
• rerender-simple-expression-in-memo - Don't useMemo for simple primitive expressions
• rerender-defer-reads - Don't subscribe to state only used in callbacks
• rerender-dependencies - Use primitive values in effect dependencies
• rerender-derived-state - Subscribe to derived booleans, not raw objects
• rerender-functional-setstate - Use functional setState for stable callbacks
• rerender-lazy-state-init - Pass initializer function to useState for expensive values
• rerender-move-effect-to-event - Move interaction logic from effects to event handlers
• rerender-transitions - Use startTransition for non-urgent state updates
• rerender-use-ref-transient-values - Use refs for frequently-changing transient values

3. Rendering Performance (MEDIUM)

• rendering-hoist-jsx - Hoist static JSX outside component functions
• rendering-conditional-render - Use ternary operator instead of && for conditional rendering
• rendering-usetransition-loading - Prefer useTransition over manual loading state
• rendering-content-visibility - Use CSS content-visibility: auto for long lists
• rendering-activity - Use Activity component for preserving hidden UI state

4. Advanced Patterns (LOW)

• advanced-event-handler-refs - Store latest event handlers in refs for stable callbacks
• advanced-init-once - Initialize app-level singletons once, not per mount

Review Discipline

Never downgrade CRITICAL violations

When a CRITICAL rule violation is detected (e.g., react-rules-purity), fix it — do not rationalize exceptions. Common rationalizations to reject:

• "It's idempotent, so Strict Mode double-render is fine" — Strict Mode is not the only concern; Concurrent Mode render abandonment is the real danger.
• "It works in practice" — Concurrent features may not be active today but the code must be correct when they are.
• "Adding a comment explaining the intent is sufficient" — A comment does not prevent the bug. If the rule says "don't do X", the fix is to stop doing X.

If you detect a violation, move to "fix" before moving to "judge severity." The cost of a false positive (unnecessary refactor) is far lower than the cost of a false negative (shipping a Concurrent Mode bug).

Re-check after refactors

When a fix for one issue changes the code structure (e.g., adding callback to useEffect deps), re-run the full rule check on the modified code. A fix for one rule can regress another — e.g., fixing rerender-dependencies can reintroduce a react-rules-purity violation if it moves code back into render phase.

How to Use

Read individual rule files for detailed explanations and code examples:

rules/react-rules-purity.md
rules/rerender-no-inline-components.md

Each rule file contains:

• Brief explanation of why it matters
• Incorrect code example
• Correct code example
• Reference links