How to use React’s experimental new Profiler feature


The folks over at the React team are trying to make rendering asynchronous. This can make it tough to reliably measure how long components are taking to render during mounting/updating. Hence, they are messing around with this shiny new Profiler component.

Using <Profiler />

import React, { unstable_Profiler as Profiler } from 'react';...const Profiler = React.unstable_Profiler;
import React, { unstable_Profiler as Profiler } from 'react';class ComponentWithProfiling extends React.Component {
state = {
count: 0
logProfile = (id, phase, actualTime, baseTime, startTime, commitTime) => {
console.log(`${id}'s ${phase} phase:`);
console.log(`Actual time: ${actualTime}`);
console.log(`Base time: ${baseTime}`);
console.log(`Start time: ${startTime}`);
console.log(`Commit time: ${commitTime}`);
go = direction => () => this.setState(({ count }) => ({
count: direction === "up" ? count + 1 : count - 1
render() {
return (
<Profiler id="app" onRender={this.logProfile}>
<button onClick={this.go("up")}>☝️</button>
<div>The count is {this.state.count}</div>
<button onClick={this.go("down")}>👇</button>


I know for me personally, this tool isn’t gonna be super useful just yet. But it’s one of those things that’s good to know about, because if I do ever hit those performance bottlenecks, this will be a good measuring stick.📏



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dave Lunny

Dave Lunny


Developer at FOSSA • Not afraid to use emojis in commit messages