react-component-analyzer

majiayu000's avatarfrom majiayu000

Debug React component issues including TypeScript types, props, state management, hooks, and rendering problems. Use when troubleshooting component not rendering, prop errors, state not updating, hook issues, or TypeScript type mismatches.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 5, 2026
[Debugging]

When & Why to Use This Skill

The React Component Analyzer is a specialized Claude skill designed to diagnose and resolve complex frontend issues in React 18 and TypeScript environments. It provides expert-level troubleshooting for component rendering failures, prop type mismatches, state synchronization problems, and React Query data fetching errors, significantly accelerating the debugging workflow for modern web applications.

Use Cases

  • Troubleshooting 'Component not rendering' issues by verifying exports, route configurations, and conditional logic.
  • Resolving TypeScript type mismatches between component props and backend API responses to ensure runtime stability.
  • Debugging React hooks like useEffect and useMemo to fix infinite re-render loops or stale state closures.
  • Optimizing React Query (TanStack Query) implementations by verifying query keys, cache settings, and mutation invalidation logic.
  • Analyzing project-wide component structures and file paths to fix broken imports and export mismatches.
namereact-component-analyzer
descriptionDebug React component issues including TypeScript types, props, state management, hooks, and rendering problems. Use when troubleshooting component not rendering, prop errors, state not updating, hook issues, or TypeScript type mismatches.
allowed-toolsRead, Grep, Glob

React Component Analyzer

Analyzes and debugs React/TypeScript component issues in this project.

Project Context

  • Frontend: React 18 with TypeScript
  • Build tool: Vite
  • State management: React Query (TanStack Query)
  • Routing: React Router v6
  • Styling: Tailwind CSS
  • Components: frontend/src/components/
  • Pages: frontend/src/pages/
  • Types: frontend/src/types/
  • Services: frontend/src/services/

When to Use

  • "Component not rendering"
  • "Props not being passed"
  • "State not updating"
  • "useEffect not firing"
  • "TypeScript error on component"
  • "React Query not fetching"
  • "Infinite re-renders"

Debugging Approach

1. Component Structure

  • Check component file exists and exports correctly
  • Verify import paths are correct
  • Check for TypeScript errors in props interface

2. Props and Types

  • Verify prop types match between parent and child
  • Check for optional vs required props
  • Look for type mismatches with API responses

3. State and Hooks

  • Check useState/useReducer initial values
  • Verify useEffect dependencies
  • Look for missing dependencies causing stale closures
  • Check useMemo/useCallback usage

4. React Query Issues

  • Verify query keys are correct
  • Check enabled/refetch conditions
  • Look for stale time and cache settings
  • Verify mutation invalidations

Common Issues

Component not rendering:

// Check: Is it exported correctly?
export default ComponentName;  // or
export { ComponentName };

// Check: Is the route configured?
<Route path="/page" element={<ComponentName />} />

Props type mismatch:

// Check: Does interface match API response?
interface Project {
  id: number;
  title: string;  // API might return 'name' not 'title'
}

useEffect not firing:

// Check: Dependencies array
useEffect(() => {
  // This only runs when `id` changes
}, [id]);  // Missing dependency?

React Query stale data:

// Check: Query invalidation after mutation
const mutation = useMutation({
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['projects'] });
  }
});

Key Files to Check

frontend/src/
├── components/
│   ├── common/          # Shared components
│   ├── projects/        # Project-specific components
│   └── ui/              # UI primitives
├── pages/
│   ├── ExplorePage.tsx  # Explore/discovery page
│   ├── ProjectPage.tsx  # Single project view
│   └── DashboardPage.tsx
├── types/
│   ├── models.ts        # Data model types
│   └── api.ts           # API response types
├── services/
│   ├── api.ts           # Axios instance
│   └── projects.ts      # Project API calls
└── hooks/
    └── useProjects.ts   # Custom hooks

Type Checking Tips

# Run TypeScript check
cd frontend && npx tsc --noEmit

# Check specific file
npx tsc --noEmit src/components/MyComponent.tsx

Browser DevTools

  • React DevTools: Inspect component tree, props, state
  • Network tab: Verify API requests/responses
  • Console: Check for React warnings/errors