A rerender is not a repaint

I spent a long time believing a React rerender was the slow part. Then I profiled a janky page and found React was done in two milliseconds — the browser spent the next forty laying everything out again.

Three layers, three costs

Rerender is a React word: it runs your components and diffs the virtual tree. Reflow is the browser recomputing geometry. Repaint is filling in pixels. They're related but independently expensive, and you can trigger the bottom two with no help from React at all.

The classic trap is reading layout inside a loop. Touch offsetHeight right after you change a style and the browser must flush a synchronous layout to answer you — do that per item and you've built an accidental O(n squared).

Most "React is slow" bugs are really "the DOM was measured and mutated in the same breath."

What I do now

Batch the reads, then the writes. Animate transform and opacity (compositor-only) instead of top or width (layout). And before blaming the framework, open the performance panel and find out which of the three layers actually ran long. Usually it isn't the one with the famous name.