MENU


Profiler

The Profiler measures how long it takes React to render a component. This helps to identify parts of an application that are slow and may benefit from optimizations such as memoization.

function onRenderCallback( id, // the "id" prop of the Profiler tree that has just committed phase, // either "mount" (if the tree just mounted) or "update" (if re-rendered) actualDuration, // time spent rendering the committed update baseDuration, // estimated time to render the entire subtree without memoization startTimeStamp, // when React began rendering this update commitTimeStamp, // when React committed this update interactions // the Set of interactions belonging to this update) { // Aggregate or log render timings...}
RESETRUNFULL
render(
  <App>
    <Profiler id="Panel" onRender={ onRenderCallback }>
      <Panel {...props}>
        <Profiler id="Content" onRender={ onRenderCallback }>
          <Content {...props} />
        </Profiler>
        <Profiler id="PreviewPane" onRender={ onRenderCallback }>
          <PreviewPane {...props} />
        </Profiler>
      </Panel>
    </Profiler>
  </App>);

Profiler adds overhead and is disabled on a production build.