A story about chasing unnecessary renders, the tools that exposed them, and the patterns that finally made them stop.

Our app had a search bar. It worked fine. It felt fine. Until a designer on the team — curious, with DevTools open — asked why the sidebar, the header, the notification badge, and a completely unrelated recommendations panel all lit up in the React DevTools highlighter every time she typed a single character into it.

She wasn't filing a bug. She was just confused. I was too, until I sat down and traced it.

That was the beginning of three weeks I now think of as re-render hell. Not because the app was broken — it wasn't.…