BeforeMerge: React Review

Comprehensive code review knowledge base for React applications (framework-agnostic). Contains rules across 4 categories — security, performance, architecture, and quality — prioritized by impact.

When to Apply

Reference these rules when:

Reviewing pull requests for React/TypeScript projects
Writing new components, hooks, or utilities
Auditing existing code for security vulnerabilities
Refactoring code for performance or maintainability
Running pre-merge quality checks

Rule Categories by Priority

Priority	Category	Impact	Prefix	Focus
1	Security	CRITICAL	`sec-`	CWE-mapped anti-patterns
2	Performance	HIGH	`perf-`	Runtime rendering optimization
3	Architecture	MEDIUM	`arch-`	Design patterns and code organization
4	Quality	MEDIUM	`qual-`	Maintainability and code health

How to Use

Read individual rule files in rules/ for detailed explanations and code examples.

Each rule contains:

Brief explanation of why it matters
Incorrect code example with explanation
Correct code example with explanation
CWE mapping where applicable
References to official documentation

For the complete compiled guide: AGENTS.md

beforemerge-react-review

BeforeMerge: React Review

When to Apply

Rule Categories by Priority

How to Use

Security(4)

Prevent Prototype Pollution from Untrusted Input

Sanitize Content Before dangerouslySetInnerHTML

Never Use eval() or new Function() with User Input

Use Cryptographic Randomness for Tokens and IDs

Performance(6)

Split Large Contexts to Prevent Unnecessary Consumer Re-renders

Virtualize Large Lists Instead of Rendering All Items

Avoid Inline Object/Array/Function Creation in JSX Props

Memoize Expensive Computations with useMemo

Avoid Inline Function Definitions in JSX

Memoize Expensive Computations

Quality(6)

Avoid useEffect for Derived State

Use Stable Keys for List Items

Do Not Mix Controlled and Uncontrolled Input Patterns

Add Error Boundaries Around Unreliable UI Sections

Never Use Array Index as Key for Dynamic Lists

Always Clean Up useEffect Side Effects

Architecture(5)

Colocate State with the Components That Use It

Avoid Prop Drilling

Eliminate Prop Drilling Through 3+ Component Levels

Prefer Composition Over Monolithic Conditional Rendering

Extract Duplicated Stateful Logic into Custom Hooks

Automate beforemerge-react-review checks on every PR