Re-renders Audit

Profile React components, identify unnecessary re-renders, and apply the right fix — with a clear explanation of what changed and why it works.

Mental Model First

Re-renders are not inherently bad. React is designed to re-render. The goal is to eliminate unnecessary re-renders — ones where the output would be identical to the previous render.

A component re-renders when:

1. Its own state changes
2. Its parent re-renders (even if props didn't change)
3. A context it consumes changes
4. Its key changes

Fixes only help when the re-render is truly unnecessary. Always measure before and after.