# React Code Reviewer

> Invoke when quality-reviewer reviews React 19 TypeScript code. Provides component architecture review, hook dependency validation, render performance checks, accessibility audit patterns, and TypeScript type correctness verification.

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

---


# React Code Review Guidelines

## Review Categories

### Component Architecture

#### Server vs Client

**Red Flags:**
- 'use client' on component that doesn't use hooks or browser APIs
- Server Component trying to use hooks
- Client Component doing data fetching that should be on server

**Good Practices:**
- Server Components for data fetching and static content
- 'use client' only when necessary (hooks, events, browser APIs)
- Client Components receive data as props from Server Components

#### Component Structure

**Issues:**
- Component exceeds 300 lines (consider splitting)
- Multiple responsibilities in one component
- Deeply nested component tree (> 5 levels)
- Repeated code that could be extracted to hook

**Look For:**
- Single responsibility principle
- Proper component composition
- Extracted custom hooks for reusable logic

### TypeScript Usage

#### Type Safety

**Issues:**
- Use of 'any' without explanation comment
- Type assertions (as Type) without justification
- Non-null assertions (!) without null checks
- Missing prop types (implicit any)
- Missing return type on exported functions

**Best Practices:**
- All props have interface definitions
- Generic types for reusable components
- Discriminated unions for complex state
- Proper utility type usage (Partial, Pick, Omit)

#### Naming

**Check:**
- PascalCase for components and types
- camelCase for variables and functions
- Descriptive names (avoid single letters except in maps)
- Hooks prefixed with 'use'

### State Management

#### React State

**Issues:**
- Using state for derived values (should use useMemo)
- Prop drilling more than 2 levels (consider Context)
- State that could be computed from props
- Missing useCallback for functions passed to children

**Patterns:**
- useState for local UI state
- useReducer for complex state logic
- Context for deeply nested props
- Zustand for global client state
- React Query for server state

#### Side Effects

**Common Issues:**
- useEffect with missing dependencies
- useEffect without cleanup function (subscriptions)
- Infinite loops from state updates in useEffect
- Side effects in render (should be in useEffect)

**Verify:**
- All useEffect dependencies listed correctly
- Cleanup functions for subscriptions/timers
- No state updates during render

### Performance

#### Optimization

**Unnecessary Optimization:**
- React.memo on simple components
- useMemo for cheap calculations
- useCallback everywhere (premature optimization)

**Missing Optimization:**
- Expensive calculations without useMemo
- Functions recreated on every render passed to children
- Large lists without virtualization
- No code splitting for large components

#### Re-renders

**Check:**
- Inline object creation in props ({} in JSX)
- Inline array creation in props ([] in JSX)
- Inline function definitions in JSX
- Context value not memoized

### Error Handling

#### Coverage

**Missing:**
- No error handling for async operations
- No loading states for data fetching
- Missing error boundaries
- Silent error catching (empty catch blocks)

**Good Practices:**
- Loading, error, and success states all handled
- Error boundaries around route segments
- User-friendly error messages
- Retry mechanisms for failed requests

### Accessibility

#### Requirements

**Critical Issues:**
- Interactive elements without keyboard support
- Missing alt text on images
- Poor color contrast ratios
- Missing ARIA labels on custom controls
- Improper heading hierarchy

**Verify:**
- All buttons/links keyboard accessible
- Form inputs have labels
- Semantic HTML used appropriately
- Focus management in modals/dialogs

### Styling

#### Tailwind

**Issues:**
- Extremely long className strings (extract to component)
- Repeated utility combinations (create component)
- Hard-coded colors not from theme
- Magic numbers in spacing (use spacing scale)

**Best Practices:**
- Use theme colors and spacing
- Responsive classes for mobile-first design
- Conditional classes with clsx/classnames

#### CSS Modules

**Check:**
- Scoped styles don't leak globally
- No !important flags (indicates specificity issue)
- Consistent naming convention

### Data Fetching

#### React Query

**Issues:**
- Fetching in useEffect instead of React Query
- Query keys not unique or not arrays
- Missing error handling in queries
- Not using mutation for state-changing operations

**Verify:**
- Proper query key structure
- Mutations for POST/PUT/DELETE
- Query invalidation after mutations
- Loading and error states handled

#### Server Components

**Check:**
- Direct data fetching (no useEffect)
- Async function declaration
- Proper error handling with try-catch
- Loading states via Suspense boundaries

### Testing

#### Coverage

**Missing:**
- No tests for components with logic
- Only happy path tested
- Implementation details tested instead of behavior
- Missing edge case tests

**Verify:**
- User interactions tested
- Loading and error states tested
- Accessibility in tests (query by role/label)
- Integration over unit tests

### Security

**Common Issues:**
- Dangerously setting innerHTML without sanitization
- Unvalidated user input in URLs
- Sensitive data in client components (should be server)
- API keys/secrets exposed in client code

**Verify:**
- User input sanitized before rendering
- Authentication checks in appropriate places
- Secrets kept on server side

### Code Quality

#### Readability

**Issues:**
- Unclear variable names
- Complex nested ternaries
- Large boolean expressions without extraction
- No comments for complex logic

**Improvements:**
- Extract complex conditions to variables
- Use early returns to reduce nesting
- Add JSDoc for public APIs

#### Consistency

**Verify:**
- Consistent component declaration style (function vs const)
- Consistent import order
- Consistent naming conventions
- Follows project conventions in CLAUDE.md

## Review Process

### Checklist

- [ ] Component uses correct Server/Client designation
- [ ] TypeScript types complete and accurate
- [ ] State management appropriate for use case
- [ ] Performance optimizations justified
- [ ] Error handling comprehensive
- [ ] Accessibility requirements met
- [ ] Tests cover main user flows
- [ ] Code follows project conventions

### Severity Levels

**Critical:**
- Security vulnerabilities
- Accessibility blocking issues
- Data loss possibilities

**Major:**
- Type safety violations
- Performance problems
- Missing error handling

**Minor:**
- Code style inconsistencies
- Missing comments
- Minor optimization opportunities