frontend-fundamentalslisted

# Frontend Fundamentals Review > "A component should do ONE thing well. If you're describing it with 'and', split it." ## When to Apply Activate this skill when reviewing: - React/Vue/Svelte components - UI rendering logic - State management code - CSS/styling decisions - Client-side routing --- ## Review Checklist ### Component Architecture - [ ] **Single Responsibility**: Does each component do ONE job? - [ ] **Size Check**: Is the component under 200 lines? - [ ] **Props Count**: Are there fewer than 7 props? - [ ] **Naming**: Can you describe the component without saying "and"? ### State Management - [ ] **Colocation**: Is state as close as possible to where it's used? - [ ] **Lifting**: Is state shared properly between siblings via parent? - [ ] **Context vs Props**: Is prop drilling avoided (max 3 levels)? - [ ] **Server State**: Is server data managed separately (React Query/SWR)? ### Performance - [ ] **Memoization**: Are expensive computations wrapped in useMemo? - [ ] **Callbacks**: Are event handlers wrapped in useCallback where needed? - [ ] **Re-renders**: Will this cause unnecessary re-renders? - [ ] **Lazy Loading**: Are heavy components code-split? ### Accessibility - [ ] **Semantic HTML**: Are proper elements used (button vs div)? - [ ] **ARIA**: Are interactive elements accessible? - [ ] **Keyboard**: Can users navigate without a mouse? --- ## Common Mistakes (Anti-Patterns) ### 1. God Components ``` ❌ UserDashboard.tsx (1000 lines) - fetc