react-component-analyzer

Debug React component rendering issues by analyzing component structure, props validation, and hook dependencies. This Skill inspects useState, useEffect, and custom hooks for correctness, validates props interfaces against API responses, and identifies missing exports or incorrect route wiring to deliver actionable fixes.

State not updating often stems from incorrect useState usage, missing hook dependencies, or stale closures in useEffect. This Skill examines state and hooks logic, checks useEffect dependency arrays for completeness, and validates state mutations to resolve update failures.

Validate props by comparing component prop interfaces against API response types and ensuring TypeScript contracts match actual data. This Skill inspects props and types, verifies interface alignment, and identifies type mismatches causing rendering or runtime errors.

Yes. This Skill validates TanStack Query configuration, checks data fetching logic, and inspects caching behavior to ensure queries execute correctly. It targets Vite-based projects using React Query and identifies common cache, refetch, and stale-data problems.

Infinite re-renders typically result from missing useEffect dependencies, circular hook calls, or state updates triggered within render. This Skill analyzes hook dependencies, state logic, and effect chains to pinpoint and eliminate re-render cycles.

Yes. This Skill targets React 18 projects using TypeScript, Vite, React Query, React Router v6, and Tailwind CSS, analyzing component structure, props, state, hooks, and data-fetching logic across this tech stack.