react-component-analyzer

allthriveai's avatarfrom allthriveai

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 4, 2026
[Debugging]

When & Why to Use This Skill

This Claude skill is a specialized React Component Analyzer designed to diagnose and resolve complex frontend issues in React 18 and TypeScript environments. It streamlines the debugging process by analyzing component structures, prop drilling, state management flows, and React Query data fetching. By leveraging project-specific context like Vite and Tailwind CSS, it helps developers quickly identify the root causes of rendering errors, hook dependency mismatches, and type inconsistencies, significantly reducing time-to-fix for modern web applications.

Use Cases

  • Troubleshooting 'Component not rendering' issues by verifying exports, routing configurations, and conditional rendering logic.
  • Resolving TypeScript type mismatches between API response models and component prop interfaces to ensure end-to-end type safety.
  • Fixing state management bugs, such as stale closures in useEffect or incorrect initial values in useState/useReducer.
  • Optimizing data fetching layers by debugging React Query keys, stale times, and cache invalidation logic after mutations.
  • Identifying and resolving performance bottlenecks like infinite re-renders caused by unstable hook dependencies or missing useMemo/useCallback usage.
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