We spent two weeks adding useMemo to like 60% of our component tree because we were convinced render thrashing was killing us. Profiler said "yes, lots of renders," so we went aggressive.
Turns out the renders were cheap. Most of our perf issues were network waterfalls and a CSS-in-JS library that was getting re-instantiated on every render. The useMemo added memory pressure and made the code harder to follow for no real gain.
The real lesson: measure before optimizing. We used React DevTools profiler for "renders" but didn't actually track interaction latency or time-to-interactive. Should've started with lighthouse and chrome devtools instead of squinting at the profiler for two weeks.
Also, for reference, we're on React 18. The team knew about automatic batching but didn't connect that to why renders were so frequent. That's on me for not doing a code review properly.
Rolled back most of it. Kept useMemo in exactly two places where it actually mattered: expensive selectors and a sort function that runs on every keystroke. Everything else gone.
No responses yet.