review-react

name	review-react
description	React code review guidelines covering Rules of React, re-render optimization, rendering performance, and advanced patterns. Activates when writing, reviewing, or refactoring React components, hooks, or state management code.

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