React Profiler - Start profiling and reload page?

Question

Using the React dev Tools and the Profiler, is there a way to start the profiler and reload the page? Similar to how the Chrome dev tools has the button to start profiling and reload the page.

Currently if I start the profiler and refresh the page it stops the profiler.

Answer 1

The React Dev Tools have since added the reload and start profiling button.

Answer 2

I don't know if you can hit record and reload the page, but if you want to measure the page load, I think you can put the profiler in your code and then console log the results. Something like this:

logProfile = (id, phase, actualTime, baseTime, startTime, commitTime, interactions) => {
  console.log(`--------- ${id}'s ${phase.toUpperCase()} phase: ---------`);
  console.log(`Time spent rendering ${actualTime} ms`); // Time spent rendering the Profiler and its descendants for the most recent "mount" or "update" render.
  console.log(`Base time: ${baseTime} ms`); // Duration of the most recent render time for each individual component within the Profiler tree.
  console.log(`React render start time (since component mounted): ${startTime} ms`); // When the Profiler began the recently committed render.
  console.log(`React render commit time (since component mounted): ${commitTime} ms`); // The time at which the current commit took place.
  console.log(interactions);
};

And then in your render:

<Profiler id="entities" onRender={this.logProfile}><Page /></Profiler>

Answer 3

To profile the initial render, you can use the reload and start profiling button, which will reload the page and start profiling before the initial render. You can then continue or stop recording as you normally would.

source