CodePark/ questions / Performance: profiling & measuring
START PRACTICINGPRACTICE
Frontend question · React › Performance: profiling & measuring

For updates, onRender keeps reporting an actualDuration much smaller than baseDuration. What does that tell you?

function onRender(id, phase, actualDuration, baseDuration) {
  console.log(id, phase, actualDuration, baseDuration);
}

<Profiler id="Sidebar" onRender={onRender}>
  <Sidebar />
</Profiler>
Memoization is working: most of the subtree skipped rendering on those updates

Memoization is working: most of the subtree skipped rendering. baseDuration estimates the time to re-render the whole subtree with no optimisations. actualDuration is the time actually spent in this commit. A much smaller actual value means components, such as memo children, skipped rendering.

"The tree needs memoization" is the tempting wrong answer. It reads the numbers backwards: the gap shows memoization already saves work. The paint option is also wrong, because neither number includes browser paint time.