/react-code-review

name: react-code-review
description: Provides comprehensive code review capability for React applications, validates component architecture, hooks usage, React 19 patterns, state management, performance optimization, accessibility compliance, and TypeScript integration. Use when reviewing React code changes, before merging pull requests, after implementing new features, or for component architecture validation. Triggers on "review React code", "React code review", "check my React components".
allowed-tools: Read, Edit, Grep, Glob, Bash

React Code Review

Overview

This skill provides structured, comprehensive code review for React applications. It evaluates code against React 19 best practices, component architecture patterns, hook usage, accessibility standards, and production-readiness criteria. The review produces actionable findings categorized by severity (Critical, Warning, Suggestion) with concrete code examples for improvements.

This skill delegates to the `react-software-architect-review` agent for deep architectural analysis when invoked through the agent system.

When to Use

• Reviewing React components, hooks, and pages before merging
• Validating component composition and reusability patterns
• Checking proper hook usage (useState, useEffect, useMemo, useCallback)
• Reviewing React 19 patterns (use, useOptimistic, useFormStatus, Actions)
• Evaluating state management approaches (local, context, external stores)
• Assessing performance optimization (memoization, code splitting, lazy loading)
• Reviewing accessibility compliance (WCAG, semantic HTML, ARIA)
• Validating TypeScript typing for props, state, and events
• Checking Tailwind CSS and styling patterns
• After implementing new React features or refactoring component architecture

Instructions

1. **Identify Scope**: Determine which React components and hooks are under review. Use `glob` to discover `.tsx`/`.jsx` files and `grep` to identify component definitions, hook usage, and context providers.

2. **Analyze Component Architecture**: Verify proper component composition — check for single responsibility, appropriate size, and reusability. Look for components that are too large (>200 lines), have too many props (>7), or mix concerns.

3. **Review Hook Usage**: Validate proper hook usage — check dependency arrays in `useEffect`/`useMemo`/`useCallback`, verify cleanup functions in `useEffect`, and identify unnecessary re-renders caused by missing or incorrect memoization.

4. **Evaluate State Management**: Assess where state lives — check for proper colocation, unnecessary lifting, and appropriate use of Context vs external stores. Verify that server state uses TanStack Query, SWR, or similar libraries rather than manual `useEffect` + `useState` patterns.

5. **Check Accessibility**: Review semantic HTML usage, ARIA attributes, keyboard navigation, focus management, and screen reader compatibility. Verify that interactive elements are accessible and form inputs have proper labels.

6. **Assess Performance**: Look for unnecessary re-renders, missing `React.memo` on expensive components, improper use of `useCallback`/`useMemo`, missing code splitting, and large bundle imports.

7. **Review TypeScript Integration**: Check prop type definitions, event handler typing, generic component patterns, and proper use of utility types. Verify that `any` is not used where specific types are possible.

8. **Produce Review Report**: Generate a structured report with severity-classified findings (Critical, Warning, Suggestion), positive observations, and prioritized recommendations with code examples.

Examples

Example 1: Hook Dependency Issues

// ❌ Bad: Missing dependency causes stale closure
function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, []); // Missing userId in dependency array

  return <div>{user?.name}</div>;
}

// ✅ Good: Proper dependencies with cleanup
function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    let cancelled = false;
    fetchUser(userId).then((data) => {
      if (!cancelled) setUser(data);
    });
    return () => { cancelled = true; };
  }, [userId]);

  return <div>{user?.name}</div>;
}

// ✅ Better: Use TanStack Query for server state
function UserProfile({ userId }: { userId: string }) {
  const { data: user, isLoading } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
  });

  if (isLoading) return <Skeleton />;
  return <div>{user?.name}</div>;
}

Example 2: Component Composition

// ❌ Bad: Monolithic component mixing data fetching, filtering, and rendering
function Dashboard() {
  const [users, setUsers] = useState([]);
  const [filter, setFilter] = useState('');
  useEffect(() => { /* fetch + filter + sort all in one */ }, [filter]);
  return <div>{/* 200+ lines of mixed concerns */}</div>;
}

// ✅ Good: Composed from focused components with custom hooks
function Dashboard() {
  return (
    <div>
      <UserFilters />
      <Suspense fallback={<TableSkeleton />}>
        <UserTable />
      </Suspense>
      <UserPagination />
    </div>
  );
}

Example 3: Accessibility Review

// ❌ Bad: Inaccessible interactive elements
function Menu({ items }: { items: MenuItem[] }) {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <div onClick={() => setOpen(!open)}>Menu</div>
      {open && (
        <div>
          {items.map(item => (
            <div key={item.id} onClick={() => navigate(item.path)}>
              {item.label}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ✅ Good: Accessible with proper semantics and keyboard support
function Menu({ items }: { items: MenuItem[] }) {
  const [open, setOpen] = useState(false);
  return (
    <nav aria-label="Mai