React Profiler Was Kinder Than My Guessing

A page I was working on at Ransack felt heavier than it should have. My first theory was the obvious one: the map and the animated parts were expensive. Very confident theory. Very incomplete theory.

I opened React Profiler and the trace basically said, “you are making half the page update whenever progress changes.” The flashy components were involved, but not because they were inherently evil. They were receiving shared state too high up the tree and re-rendering far more often than the interaction needed.

The fix was a group of fairly normal changes: move progress state closer to where it was used, memoize the card and map components that had stable inputs, and debounce resize and input events that were firing too eagerly.

React commit time dropped by around 30%. More importantly, I could explain why. That second part matters because performance work can turn into superstition very quickly. Remove an animation. Add memo everywhere. Blame the framework. Refresh and declare victory.

I like tools that are rude with receipts

The profiler did not care which component looked suspicious. It showed what rendered, when it rendered, and how long the commit took. I would love to say this has cured me of guessing. It has mostly taught me to guess for five minutes, then measure before I become emotionally attached to the guess.

That is probably the healthier arrangement.