MEASURING COMPONENT PERFORMANCE USING REACT PROFILER API

Surya Kiran — Fri, 30 Aug 2019 09:50:55 +0000

Good performance in React application is easy to achieve and also easy to miss, but missed performance loopholes can be more expensive than we can imagine. React provides some exceptional tools to measure performance, and anything measurable can be better monitored and controlled.

The React profiler is available as part of React devtools in Google chrome extensions, which provides an excellent way to measure and record the performance of the application. At every component level, it ensures the awareness of the performance aspect in the ongoing application development. The new profiler provides a consolidated view of the application components rendered with relative ranking details, grouped by commits in the form of different charts – Flame chart, Ranked chart and specific component charts.

The latest React 16.9 is out, in which the new features and notable bug fixes make developers job easy.

With this new version of React, comes the React Profiler API which is now available to measure component performance directly. It is the API which is also internally used by the devtools profiler. It provides a new way to measure the performance at each of the individual component levels by tracking it programmatically.

With the new release, it is easier to measure and control performance at each component level:

The frequency of render
The time for each render
The base time for the initial mount or worst-case render time

The profiler API is particularly helpful in larger applications to get the performance view and impact of regression on a specific component.

HOW TO USE THE REACT PROFILER API?

The new 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 handler for render.

const MyGrid = (props) => {
return (

);
};

Use Profiler tag around any number of components to measure their performance, assign a unique id value to facilitate the identification and thus help to track each component uniquely in the Profiler tree.
Define a generic handler, which is called each time the component is rendered, for the first mount and each subsequent update. This can be defined as a common utility function with the profiling data handling logic and can be used across the application whenever profiling any component.

The handler receives the profiling details which can be used appropriately to measure and track the performance parameters of the component.

function onRenderCallback(
id,
phase,
actualDuration,
baseDuration,
startTime,
commitTime,
interactions
) {
//Logic to handle the profiling details
console.log( 'The component', id, ', The phase', phase,', Time taken for the update', actualDuration, baseDuration, startTime, commitTime, interactions);
}

Source:https://walkingtree.tech/measuring-component-performance-using-react-profiler-api/

Forem: Surya Kiran

MEASURING COMPONENT PERFORMANCE USING REACT PROFILER API