Profiler of react learning

Time:2020-10-12

ability: measure how often to render a react application and the cost of rendering, in order to identify the slower parts of the application.

Usage: can be used anywhere in the react tree to measure the overhead of rendering that part.

Demo

render() {
  return (
    <App>
      <Profiler id="Navigation" onRender={callback}>
        <Navigation props={...props} />
      </Profiler>
      <Main />
    </App>
  );
}

Onrender callback
React calls this callback function when any component in the profiler’s component tree commits an update. Its parameters describe what was rendered and how long it took.

function onRenderCallback (
  ID, // the ID of the profiler tree where the submission occurred
  phase, // 'mount'/'update'
  Actual duration, // the time taken to update committed
  Baseduration, // the time it takes to render the entire tree without using memoization
  Starttime, // the start time of react rendering in this update
  Committime, // the time of react committed in this update
  Interactions // the set of interactions updated this time
){
}