Profiling with React DevTools

Start with a recording, not a theory

The profiler records every commit during an interaction and shows how long each component took to render. That is the difference between knowing a page is slow and knowing which subtree is responsible for it.

Work interaction by interaction. Record one action — a keystroke, a filter change — and look at the commits it produced. A profile of a whole session averages away the spike you are hunting.

The re-render highlight is the fastest first signal: if half the screen flashes when you type one character, you have found your problem before opening a single trace.