performance-fundamentals

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

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)