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 component |
2. | Add profiler component in render method |
3. | Add id and onRender property to profiler component |
4. | 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
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 {}
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);
3 console.log("phase : " + phase);
4 console.log("actualTime : " + actualTime);
5 console.log("baseTime : " + baseTime);
6 console.log("startTime : " + startTime);
7 console.log("commitTime : " + commitTime);
8 }
Parent component App
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);
15 console.log("phase : " + phase);
16 console.log("actualTime : " + actualTime);
17 console.log("baseTime : " + baseTime);
18 console.log("startTime : " + startTime);
19 console.log("commitTime : " + commitTime);
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
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 }
Related options for your search