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