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>;
   }