How to make React call `mark` less often?

Question

I’m trying to investigate the performance of a large React app, but every time I try the regular performance tool in Chrome, a very large proportion of it is taken by the mark function, which I assume is the Performance.mark Javascript function, see the following image as an example. Here, out of 140ms, 108ms were spent in the mark function.

Is there a way to make React not put so many marks? I know I can compile in production mode, but then hot reload does not work which makes it a lot harder to iterate quickly.

Answer 1

One way to remove the performance marks from react in the performance tab is to override the performance.mark method like this:

window.performance.markOrig = window.performance.mark;
window.performance.mark = (name, options) => {
  // ignore react internal marks
  if (name[0] !== "⚛") {
    window.performance.markOrig(name, options);
  }
};

This way you'll see only your perf marks and it should clean up the timings when in development mode