How to use React’s experimental new Profiler feature

TLDR;

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>
</Profiler>
);
}
}
https://7jroojkv30.codesandbox.io/

Conclusion

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

932 Followers

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