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