React.Profiler component in React 16.9

Profiling React applications for performance was introduced in React 16.5 using a React Profiler DevTools plugin, this works but not straightforward. To get this working we need to open the developer tools, record the performance metrics and later analyze the results. Also it records the performance of all running React Apps.

React 16.9 introduces the new React.Profiler component which avoids the drawbacks of the earlier DevTools based Profiler. The Profiler API is programmable and we can configure it only for specific applications. Also the Profiler API does not need DevTools support it can capture and write performance logs to the console directly.

The React 16.9 Profiler API introduces a new React.Profiler component which can be plugged in to and React Component. The Component takes 2 properties, and id property to identify the Component on which the profiler does the monitoring and an onRender function which will capture the performance metrics and log it.

The React.Profiler component syntax is as follows.

<Profiler id="ProfilerId" onRender={onRender}>

    <App />

</Profiler>

function onRender(<parameters to capture>)

{

  // log performance parameters

}

Following are some of the parameters which can be captured and logged in onRender

  id:  Id of the profiler, value to uniquly identify different profiler used in nested components

  phase: Phase of the component, 'mount' for initial load and 'update' for subsequent re-render phases

  actualDuration: Actual time taken to render / re-render the component.

  baseDuration: Estimated time to render the entire subtree without memoization

  startTime: Timestamp when the phase (render / re-render) started

  commitTime: Timestamp when the phase (render / re-render) completed

  interactions: Set of interactions belonging to this update