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.
Performance optimization and correctness guide for React applications. Contains 23 rules across 4 categories, prioritized by impact.
Reference these guidelines when:
| 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 |
react-rules-purity - Components and Hooks must be pure; no side effects during renderreact-rules-hooks - Only call Hooks at the top level and from React functionsreact-rules-calling - Never call components as functions or pass Hooks as valuesrerender-no-inline-components - Never define components inside other componentsrerender-derived-state-no-effect - Derive state during render, not in effectsrerender-memo - Extract memoized child components to avoid re-rendersrerender-memo-with-default-value - Hoist default non-primitive props outside memorerender-simple-expression-in-memo - Don't useMemo for simple primitive expressionsrerender-defer-reads - Don't subscribe to state only used in callbacksrerender-dependencies - Use primitive values in effect dependenciesrerender-derived-state - Subscribe to derived booleans, not raw objectsrerender-functional-setstate - Use functional setState for stable callbacksrerender-lazy-state-init - Pass initializer function to useState for expensive valuesrerender-move-effect-to-event - Move interaction logic from effects to event handlersrerender-transitions - Use startTransition for non-urgent state updatesrerender-use-ref-transient-values - Use refs for frequently-changing transient valuesrendering-hoist-jsx - Hoist static JSX outside component functionsrendering-conditional-render - Use ternary operator instead of && for conditional renderingrendering-usetransition-loading - Prefer useTransition over manual loading staterendering-content-visibility - Use CSS content-visibility: auto for long listsrendering-activity - Use Activity component for preserving hidden UI stateadvanced-event-handler-refs - Store latest event handlers in refs for stable callbacksadvanced-init-once - Initialize app-level singletons once, not per mountWhen a CRITICAL rule violation is detected (e.g., react-rules-purity), fix it — do not rationalize exceptions. Common rationalizations to reject:
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).
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.
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: