generic-react-code-reviewer

React Code Reviewer

Review React/TypeScript code against production quality standards.

Extends: Generic Code Reviewer - Read base skill for full code review methodology, P0/P1/P2 priority system, and judgment calls.

Pre-Commit Commands

npm run test        # Unit tests
npm run type-check  # TypeScript strict mode
npm run lint        # ESLint/Prettier
npm run build       # Production build

React-Specific Checks

TypeScript Strict Mode

// Required tsconfig.json settings
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

• No any types for user input or API responses
• Validate external data with unknown first, then type guard
• Generic types over any in reusable utilities

Component Patterns

Pattern	Check
Props	Interface defined, no any
State	Typed with Zustand/useState
Events	Typed event handlers
Refs	useRef<ElementType>(null)

Hook Dependency Arrays

// P1 Issue: Missing dependencies
useEffect(() => {
  fetchData(userId); // userId missing from deps
}, []); // ❌

// Correct
useEffect(() => {
  fetchData(userId);
}, [userId]); // ✓

Rule: Enable react-hooks/exhaustive-deps ESLint rule.

State Management (Zustand/Redux)

• Store slices properly typed
• Actions return void (update state directly)
• Selectors memoized for derived state
• Large data (>1MB) in IndexedDB, not localStorage

React Query/SWR Patterns

// Proper typing
const { data } = useQuery<User>({
  queryKey: ["user", id],
  queryFn: () => fetchUser(id),
});

// Check: staleTime, cacheTime configured
// Check: error boundaries for query failures

Performance (P1)

Bundle Size Targets

Target	Threshold
Initial bundle	< 100KB gzipped
Lazy-loaded chunks	< 50KB each
Total JS	< 300KB