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. Performance was "fine." But once you see it, you can't unsee it: a 400-component tree thrashing on every keystroke, most of it doing absolutely nothing meaningful, all of it eating time on lower-end devices that our users in Tier-2 cities actually used. What follows is the short version of what we found, what caused it, and — more importantly — what actually fixed it.…