# Daangn Stackflow Review React > React Code Review Guidelines - Skill: `tomevault-io/daangn-stackflow-review-react` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/daangn-stackflow-review-react` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/daangn-stackflow-review-react/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/daangn-stackflow-review-react --- # 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 --- > Source: [daangn/stackflow](https://github.com/daangn/stackflow) — distributed by [TomeVault](https://tomevault.io).