# React Guard

> Use after writing or modifying React components (.tsx/.jsx), before committing React changes, or when reviewing a React PR — "validate the React code", "react guard", "check these components". Loads the React review skills and runs a BLOCKER/WARNING/INFO checklist over the changed files. Works standalone, no Next.js required. NOT for designing new hooks or choosing patterns — route through react-senior-guide for that.

- Skill: `b4r7x/react-guard` (Agent Skill)
- Install (CLI): `npx skillmds@latest add b4r7x/react-guard`
- Raw SKILL.md: https://api.skillmd.com/api/skills/b4r7x/react-guard/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: b4r7x (https://skillmd.com/u/b4r7x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/b4r7x/react-guard

---


# React Guard

Validates React code against best practices. Can be used standalone for any React project (no Next.js required).

## When to Use

- After writing or modifying React components (`.tsx`/`.jsx`)
- Before committing React code changes
- When reviewing React PRs

## Workflow

### Phase 1: Load Skills

Load ALL of the following skills using the Skill tool:

1. `code-quality` — universal quality principles
2. `react-senior-guide` — hook router and cross-cutting principles
3. `react-patterns` — React 19 patterns, Server Components, Actions
4. `react-anti-patterns` — 18 anti-patterns by detection difficulty
5. `context-memoization-guide` — memoization decision framework
6. `vercel-react-best-practices` — performance optimization rules

### Phase 2: Validate

For each changed `.tsx`/`.jsx` file, check:

**BLOCKER:**
- Components defined inside other components
- `useEffect` for derived state (compute during render instead)
- Missing `useEffect` cleanup (timers, subscriptions, listeners)
- Hooks called conditionally or after early returns
- State mutation (must create new references)
- `&&` with numbers that could be 0

**WARNING:**
- `useCallback` without `memo()` on child
- Boolean explosion (multiple boolean states instead of union type)
- Props mirroring in state via useEffect
- Missing loading/error/empty states
- Stale closures in setTimeout/setInterval/async
- God components (>200 lines mixing fetch + logic + UI)
- Unnecessary memoization (measure before optimizing)

**INFO:**
- key={index} on dynamic lists
- Manual fetch instead of React Query (or Server Components)
- Granular useState that should be useReducer

### Phase 3: Report

Output findings grouped by severity with file:line references.