Profiler in react

The Profiler measures how often a React application renders and what the “cost” of rendering is. Its purpose is to help identify parts of an application that are slow and may benefit from optimizations such as memoization.

A Profiler can be added anywhere in a React tree to measure the cost of rendering that part of the tree. It requires two props: an id (string) and an onRender callback (function) which React calls any time a component within the tree “commits” an update.

Note: It is possible to have more then one Profiler in the component render method. If render method has more than one profiler, it can share common callback method. It must have unique id for each Profiler.

Steps to add profiler in component

1. Import Profiler in component2. Add profiler component in render method3. Add id and onRender property to profiler component4. Write callback method with required parameters

Import Profiler in component

The profiler component is part of react package which needs to be imported before adding into the component. The profiler component can be added any where in the component to measure the rendering cost of the component.

Import profiler component

 1 // importing named profiler component
 2 import React, { Profiler } from 'react';

Add profiler component in render method

The profiler component can be added any where in the component to measure the rendering cost of the component. To measure the rendering cost of component, the component needs to add inside the Profiler component. Once the added component gets rendered or re-rendered, the specified callback method of Profiler gets called.

Add profiler component in render method

 1 render() {
 2     return (
 3       <div>
 4         <Profiler>
 5           <ChildOne />
 6         </Profiler>
 7         <button onClick={this.changeState}>State change</button>
 8       </div>
 9     );
 10 }

Add id and onRender property to profiler component

To measure the rendering cost of component, the component needs to add inside the Profiler component. Once the added component gets rendered or re-rendered, the specified callback method of Profiler gets called.

Adding id and onRender property to profiler component

 1 render() {
 2     return (
 3       <div>
 4           {/* adding property id and onRender property */}
 5         <Profiler id="ChildOne" onRender={this.callback}>
 6           <ChildOne />
 7         </Profiler>
 8         <button onClick={this.changeState}>State change</button>
 9       </div>
 10     );
 11 }

The id and onRender property helps to measure the rendering cost of the child component. When callback method called, it provides the information about the components which are added inside the Profiler.

Write callback method with required parameters

The method will be called when added component commit or re-render. This method receive many parameter to the callback method which can be added in the parameter of method which is required.

Write callback method with required parameters

 1 callback(id, phase, actualTime, baseTime, startTime, commitTime) {
 2     console.log("id : " + id); // Id of profiler
 3     console.log("phase : " + phase); // phase of component rendering . mount, update etc
 4     console.log("actualTime : " + actualTime); // Actual time
 5     console.log("baseTime : " + baseTime); // Base time
 6     console.log("startTime : " + startTime); // Start time
 7     console.log("commitTime : " + commitTime); // commit time
 8 }

Parent component App

App component

 1 import React, { Profiler } from 'react';
 2 import ChildOne from './components/ChildOne';
 3 
 4 class App extends React.Component {
 5 
 6   constructor(props) {
 7     super(props);
 8 
 9     this.callback = this.callback.bind(this);
 10     this.changeState = this.changeState.bind(this);
 11   }
 12 
 13   callback(id, phase, actualTime, baseTime, startTime, commitTime) {
 14     console.log("id : " + id); // Id of profiler
 15     console.log("phase : " + phase); // phase of component rendering . mount, update etc
 16     console.log("actualTime : " + actualTime); // Actual time
 17     console.log("baseTime : " + baseTime); // Base time
 18     console.log("startTime : " + startTime); // Start time
 19     console.log("commitTime : " + commitTime); // commit time
 20   }
 21 
 22   changeState() {
 23     let user = this.state.username === "superuser" ? "employee" : "superuser";
 24     this.setState({ username: user });
 25   }
 26 
 27   render() {
 28     return (
 29       <div>
 30         <Profiler id="ChildOne" onRender={this.callback}>
 31           <ChildOne />
 32         </Profiler>
 33         <button onClick={this.changeState}>State change</button>
 34       </div>
 35     );
 36   }
 37 }
 38 
 39 export default App;
 40

Child component ChildOne

ChildOne component

 1 import React from 'react';
 2 
 3 export default class ChildOne extends React.Component {
 4 
 5     render() {
 6         return (
 7             <div>Child one component !! {this.props.username}</div>
 8         );
 9     }
 10 }