---

name: performance-fundamentals description: | TRIGGERS: "is this performant?", "will this scale?", "performance check", "too slow", "fetching data", "loading list", "rendering many", "large dataset", "lots of items", "mapping over", "looping through", "pagination", "infinite scroll", "caching", N+1 queries, re-renders, memory leaks, Big O, optimization, caching, lazy loading, pagination. USE WHEN: Junior is BUILDING features with loops, data fetching, lists, or resource-intensive operations. PROVIDES: N+1 detection, complexity analysis, caching strategies, scalability assessment. PROACTIVE: Triggers when junior mentions building features that could have performance implications.

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

Copy❌ 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

Copy❌ 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

Copy❌ 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

Copy❌ GET /api/users → returns 10,000 users with all fields

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

5. Missing Cleanup

Copy❌ 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

---

Performance Targets

---

Red Flags to Call Out

---

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)