React.Profiler component example

In the previous post we saw in detail about the React.Profile component and how it is used to capture performance metrics of a React Component. In this post we shall see a small example on how to use the React.Profile component to measure and display performance metrics.

We will use the useEffect example and add React.Profile to it. The sample consists of a Parent component App, child component UseEffectComponent and the Root ReactDOM to load the App component. We will add Profiler to the App component in the Root and add Profiler component for UseEffectComponent in the parent App component as follows. Remember we are using create-react-app boilerplate to create these examples which will have additional supporting files.

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.