performance-fundamentals

What this skill does

# Performance Fundamentals Review

> "Premature optimization is the root of all evil, but mature ignorance is worse."

## When to Apply

Activate this skill when reviewing:
- Database queries (especially in loops)
- React/Vue render logic
- API response payloads
- Data transformations
- File operations
- Caching decisions

---

## Review Checklist

### Database Performance

- [ ] **No N+1 queries**: Are related records fetched in bulk, not loops?
- [ ] **Indexes**: Are frequently queried fields indexed?
- [ ] **Pagination**: Do list endpoints paginate results?
- [ ] **Select only needed fields**: Are we fetching entire records unnecessarily?

### Frontend Performance

- [ ] **Memoization**: Are expensive computations cached?
- [ ] **Re-render prevention**: Will state changes cause unnecessary re-renders?
- [ ] **Bundle size**: Are heavy libraries lazy-loaded?
- [ ] **Image optimization**: Are images properly sized and formatted?

### API Performance

- [ ] **Response size**: Is the payload minimal?
- [ ] **Compression**: Is gzip/brotli enabled?
- [ ] **Caching headers**: Are cacheable responses marked?
- [ ] **Async processing**: Are slow operations queued?

### Memory & Resources

- [ ] **Cleanup**: Are subscriptions/timers cleaned up?
- [ ] **Memory leaks**: Are event listeners removed?
- [ ] **Connection pooling**: Are DB connections reused?

---

## Common Mistakes (Anti-Patterns)

### 1. The N+1 Query Problem
```
❌ const users = await User.findAll();
   for (const user of users) {
     user.posts = await Post.findByUserId(user.id); // N queries!
   }

✅ const users = await User.findAll({
     include: [{ model: Post }] // 1 query with JOIN
   });
```

### 2. Unnecessary Re-renders
```
❌ function Parent() {
     const handleClick = () => {}; // New function every render
     return <Child onClick={handleClick} />;
   }

✅ function Parent() {
     const handleClick = useCallback(() => {}, []);
     return <Child onClick={handleClick} />;
   }
```

### 3. Computing in Render
```
❌ function UserList({ users }) {
     // Runs on every render
     const sorted = users.sort((a, b) => a.name.localeCompare(b.name));
     return <ul>{sorted.map(...)}</ul>;
   }

✅ function UserList({ users }) {
     const sorted = useMemo(
       () => [...users].sort((a, b) => a.name.localeCompare(b.name)),
       [users]
     );
     return <ul>{sorted.map(...)}</ul>;
   }
```

### 4. Fetching Everything
```
❌ GET /api/users → returns 10,000 users with all fields

✅ GET /api/users?page=1&limit=20&fields=id,name,email
```

### 5. Missing Cleanup
```
❌ useEffect(() => {
     const interval = setInterval(fetchData, 5000);
     // No cleanup! Runs forever.
   }, []);

✅ useEffect(() => {
     const interval = setInterval(fetchData, 5000);
     return () => clearInterval(interval);
   }, []);
```

---

## Socratic Questions

Ask the junior these questions instead of giving answers:

1. **Scale**: "What happens when there are 10,000 items? 1,000,000?"
2. **Queries**: "How many database queries does this operation make?"
3. **Re-renders**: "When this state changes, what components re-render?"
4. **Memory**: "Is anything holding a reference after it's no longer needed?"
5. **Payload**: "Does the client need ALL of this data?"

---

## Big O Quick Reference

| Pattern | Complexity | Example | At 10,000 items |
|---------|------------|---------|-----------------|
| Direct lookup | O(1) | `map.get(key)` | 1 op |
| Single loop | O(n) | `array.find()` | 10,000 ops |
| Nested loops | O(n²) | `for i { for j }` | 100,000,000 ops |
| Sort | O(n log n) | `array.sort()` | ~130,000 ops |

---

## Performance Targets

| Metric | Target | Measure With |
|--------|--------|--------------|
| Time to First Byte (TTFB) | < 600ms | DevTools Network |
| Largest Contentful Paint (LCP) | < 2.5s | Lighthouse |
| First Input Delay (FID) | < 100ms | Lighthouse |
| Cumulative Layout Shift (CLS) | < 0.1 | Lighthouse |
| API Response Time | < 200ms (p95) | Server metrics |

---

## Red Flags to Call Out

| Flag | Question to Ask |
|------|-----------------|
| Query inside a loop | "Can we batch this into one query?" |
| No pagination | "What if there are 100,000 records?" |
| `SELECT *` | "Do we need all these fields?" |
| Large JSON in localStorage | "Will this slow down page load?" |
| Inline function in JSX | "Does this create a new function every render?" |
| setInterval without cleanup | "What clears this when the component unmounts?" |
| Synchronous file operations | "Should this be async?" |
| No loading states | "What does the user see while waiting?" |

---

## Quick Wins

1. **Add indexes** to frequently queried DB columns
2. **Paginate** all list endpoints
3. **Lazy load** below-the-fold content
4. **Compress** API responses
5. **Cache** expensive computations with useMemo
6. **Debounce** search inputs
7. **Virtualize** long lists (react-window)