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.

The onRender callback receives details about what was rendered and how long it took.
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>
);

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
  startTime,      // when React began rendering this update
  commitTime      // when React committed this update
) {
  // Aggregate or log render timings...
}

Profiler adds overhead and is disabled on a production build. (Older React versions also passed a seventh "interactions" parameter to onRender, part of an experimental interaction-tracing API; that parameter was removed along with the rest of that API, so the callback now always receives exactly six arguments.)