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
- Component Structure
-
Check component file exists and exports correctly
-
Verify import paths are correct
-
Check for TypeScript errors in props interface
- Props and Types
-
Verify prop types match between parent and child
-
Check for optional vs required props
-
Look for type mismatches with API responses
- State and Hooks
-
Check useState/useReducer initial values
-
Verify useEffect dependencies
-
Look for missing dependencies causing stale closures
-
Check useMemo/useCallback usage
- 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