The performance of an Application can be good or bad depending on the quality of code. In React, The Profiler API helps in measuring the performance of a component and enhancing it.
The Profiler API for DevTools first got shipped in the 16.5 React version. It helps developers find difficulties in your web application. In 16.9 version, the React team has gone a step further to enhance the API.
How to use Profiler API?
The Profiler API can be included as an additional tag around each of the components to measure its performance, by giving it a unique id and including a common callback for render.
render(
<App>
<React.Profiler id="DemoComponent" onRender={callback}>
<DemoComponent {...props} />
</React.Profiler>
</App>
);
Callback Parameters
function callback(
id,
phase,
actualDuration,
baseDuration,
startTime,
commitTime,
interactions
) {
...
}The callback to the profiler has seven parameters: id, phase, actualDuration, baseDuration, startTime, commitTime, and interactions.
- id (string) : The id prop of the Profiler that has just committed. This can be used to identify which part of the tree was committed if you are using multiple profilers.
- phase (mount or update) - Identifies whether the component has just been mounted for the first time or re-rendered due to a change in props, state, or hooks.
- actualDuration (number) - Time spent rendering the Profiler and its descendants for the current update. This indicates how well the subtree makes use of memoization. Ideally, this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change.
- baseDuration (number) - Duration of the most recent render time for each individual component within the Profiler component. This value estimates a worst-case cost of rendering.
- startTime (number) - Timestamp when React began rendering the current update.
- commitTime (number) - Timestamp when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
- interactions (Set) - Set of interactions that were being traced when the update was scheduled.
Once we have added the profiler, we can see it in the profiler DevTools. Profilers are really light-weight, it should be used only when required because each profiler adds some CPU and memory overhead to an application.
While the Profiler from the DevTools records all of your React app. With the Profiler component, you can isolate and record only the parts of the tree that require more attention. Also, it’s disabled automatically in production build, so you don’t need to remove it after measuring.
we can start or stop the profiler devTools for the time we want to capture the performance information for each time the component is rendered. The application should render atleast once to capture that information. we can see the captured information in several ways.
