React Code Review

Conduct thorough, constructive code reviews for React SPA applications with focus on correctness, performance, maintainability, and team collaboration.

Review Approach

Review Philosophy

• Constructive: Focus on helping improve code quality, not criticizing
• Educational: Explain the "why" behind suggestions
• Prioritized: Distinguish between critical issues and nice-to-haves
• Actionable: Provide specific, implementable suggestions with examples
• Context-aware: Consider team practices and project constraints

Review Structure

1. Understand context: Ask about requirements, constraints, or specific concerns if unclear
2. Identify patterns: Look for repeated issues across the codebase
3. Prioritize feedback: Start with critical issues, then high/medium/low priority
4. Provide examples: Show better implementations with code snippets
5. Reinforce good practices: Acknowledge what's done well

Core Review Areas

1. Functionality & Correctness

• Does the code work as intended?
• Are edge cases handled properly?
• Is error handling comprehensive?
• Are loading and error states shown to users?

2. React Best Practices

Review against established React patterns:

• Hook usage (dependencies, cleanup, conditional calling)
• Component design (single responsibility, composition)
• State management (local vs global, derived state)
• Performance (memoization, re-renders)

Reference: See references/react-best-practices.md for comprehensive React patterns

3. Anti-Patterns & Pitfalls

Identify common React mistakes:

• Memory leaks (unmounted updates, uncleaned effects)
• Stale closures in effects
• Infinite effect loops
• Unnecessary re-renders
• State management issues

Reference: See references/anti-patterns.md for detailed anti-pattern catalog

4. Technology Stack Usage

Check proper usage of project libraries. Only load references for libraries actually used in the project:

• Vite: Configuration, build optimization, HMR → See references/vite.md
• Vitest: Testing setup, mocking patterns → See references/vitest.md
• Testing Library: Query methods, user interactions → See references/testing-library.md
• Tanstack Query: Query keys, cache management, mutations → See references/tanstack-query.md
• MUI: Theme usage, styling patterns, accessibility → See references/mui.md
• axios: Error handling, interceptors, cancellation → See references/axios.md
• i18next: Translation keys, interpolation, namespacing → See references/i18next.md
• React Router: Navigation, data loading, URL state → See references/react-router.md
• Storybook: Story format, play functions, decorators → See references/storybook.md

Important: Only read reference files for libraries that are actually used in the code being reviewed. This avoids loading unnecessary context.

5. Type Safety

• TypeScript types are explicit and correct
• No any without justification
• Props and return values properly typed
• External data validated with type guards
• Event handlers use proper React types

6. Performance

• No memory leaks (cleanup in useEffect)
• Expensive calculations use useMemo appropriately
• Callbacks memoized when needed for memoized children
• Large lists consider virtualization
• Code splitting for routes and heavy components

7. Testing Quality

• Tests cover critical user paths
• Tests use Testing Library best practices (accessibility queries)
• Async updates properly handled
• Tests are maintainable (not testing implementation details)
• Mock data is realistic

8. Accessibility

• Semantic HTML elements used
• Proper ARIA labels where needed
• Keyboard navigation functional
• Form labels and error messages clear
• Color contrast and text alternatives provided

9. Code Organization & Maintainability

• Single responsibility per component
• Descriptive naming conventions
• Code is self-documenting
• Related code colocated
• DRY principle followed appropriately
• No circular dependencies

10. Security

• No sensitive data in client code
• User input validated
• No XSS vulnerabilities
• API authentication proper

Review Workflow

Step 1: Initial Assessment

1. Ask clarifying questions if context is unclear:
   • What is this component/feature supposed to do?
   • Are there specific concerns or areas to focus on?
   • Are there team conventions I should be aware of?
2. Review the overall structure and approach
3. Identify major patterns or issues

Step 2: Deep Dive Review

1. Load relevant reference documents:
   • react-best-practices.md for React patterns
   • anti-patterns.md for common mistakes
   • Library-specific files (only for libraries used in the code):
     • vite.md for Vite-specific issues
     • vitest.md for testing configuration
     • testing-library.md for test patterns
     • tanstack-query.md for React Query usage
     • mui.md for Material-UI patterns
     • axios.md for HTTP client usage
     • i18next.md for internationalization
     • react-router.md for routing patterns
     • storybook.md for component stories
   • review-checklist.md for comprehensive checklist
2. Systematically review each area
3. Note issues by severity level

Step 3: Provide Structured Feedback

Organize feedback by priority:

CRITICAL (Must fix immediately):

• Security vulnerabilities
• Bugs or broken functionality
• Memory leaks
• Type safety holes that could cause runtime errors

HIGH (Should fix before merge):

• React anti-patterns
• Performance issues
• Missing error handling
• Accessibility violations
• Test coverage gaps

MEDIUM (Nice to have):

• Code quality improvements
• Optimization opportunities
• Better naming or structure
• Additional test cases

LOW (Consider for future):

• Refactoring opportunities
• Documentation improvements
• Stylistic preferences

POSITIVE (Reinforcement):

• Good practices to acknowledge
• Well-designed solutions
• Effective patterns

Step 4: Provide Examples

For each significant issue:

1. Show the problematic code
2. Explain why it's an issue
3. Provide corrected example
4. Reference documentation when helpful

Example format:

**ISSUE**: Memory leak - state update after unmount

**CODE**:
```typescript
useEffect(() => {
  fetchData().then(data => setState(data));
}, []);

PROBLEM: If component unmounts before fetch completes, setState will be called on unmounted component.

FIX:

useEffect(() => {
  let mounted = true;
  fetchData().then(data => {
    if (mounted) setState(data);
  });
  return () => { mounted = false; };
}, []);

WHY: This prevents React warning and potential memory leaks. Better yet, use Tanstack Query which handles this automatically.

## Output Format

Structure reviews as:

1. **Summary**: Brief overview of code quality (2-3 sentences)

2. **Critical Issues** (if any): Must-fix items with examples

3. **High Priority Issues** (if any): Should-fix items with examples

4. **Medium Priority Suggestions** (if applicable): Nice-to-have improvements

5. **Low Priority Considerations** (if applicable): Future improvements

6. **Positive Observations**: What's done well (always include)

7. **Overall Recommendations**: Next steps or focus areas

## Tips for Effective Reviews

### Be Specific
❌ "This component has performance issues"
✅ "This component recreates the `style` object on every render. Move it outside the component or use `useMemo`"

### Explain Why
❌ "Use useCallback here"
✅ "Use useCallback here because this handler is passed to a memoized child component. Without it, the child will re-render unnecessarily"

### Show, Don't Just Tell
Always provide code examples for fixes, especially for complex issues

### Consider Context
- Team size and experience level
- Project timeline and constraints
- Existing codebase patterns
- Performance requirements

### Balance Thoroughness with Practicality
Don't overwhelm with minor issues. Focus on what matters most for code quality and team learning.

### Maintain Professional Tone
- Be respectful and collaborative
- Frame as suggestions, not commands
- Acknowledge good work
- Use "we" language when appropriate

## Quick Reference

For specific issues, consult:
- **React patterns**: `references/react-best-practices.md`
- **Common mistakes**: `references/anti-patterns.md`
- **Complete checklist**: `references/review-checklist.md`

Library-specific references (load only as needed):
- **Vite**: `references/vite.md`
- **Vitest**: `references/vitest.md`
- **Testing Library**: `references/testing-library.md`
- **Tanstack Query**: `references/tanstack-query.md`
- **MUI**: `references/mui.md`
- **axios**: `references/axios.md`
- **i18next**: `references/i18next.md`
- **React Router**: `references/react-router.md`
- **Storybook**: `references/storybook.md`

## Example Review Scenarios

### Scenario 1: Component Review
User submits a React component for review.
1. Check component structure and responsibility
2. Review hooks (dependencies, cleanup, order)
3. Check state management approach
4. Verify error and loading states
5. Check for performance issues
6. Review prop types and naming
7. Provide prioritized feedback

### Scenario 2: Feature Implementation Review
User submits multiple files for a feature.
1. Understand feature requirements
2. Review overall architecture
3. Check data flow and state management
4. Verify error handling across the feature
5. Review tests for feature coverage
6. Check for patterns to improve
7. Provide architectural and detailed feedback

### Scenario 3: Refactoring Review
User refactored existing code.
1. Verify functionality preserved
2. Check if refactoring improves maintainability
3. Ensure no performance regressions
4. Verify tests still pass/updated
5. Look for further improvement opportunities
6. Acknowledge successful improvements

### Scenario 4: Bug Fix Review
User fixed a bug.
1. Verify bug is actually fixed
2. Check if root cause addressed (not just symptom)
3. Look for similar issues elsewhere
4. Verify tests added to prevent regression
5. Check for edge cases
6. Suggest preventive patterns

## Remember

- **Be helpful, not harsh**: Code reviews are learning opportunities
- **Prioritize impact**: Critical issues first, style last
- **Provide context**: Explain why something matters
- **Show examples**: Make suggestions actionable
- **Acknowledge quality**: Positive reinforcement matters
- **Stay consistent**: Apply same standards across reviews
- **Consider the team**: Reviews should improve collective code quality