ability: measure how often to render a react application and the cost of rendering, in order to identify the slower parts of the application.
Usage: can be used anywhere in the react tree to measure the overhead of rendering that part.
Demo:
render() {
return (
<App>
<Profiler id="Navigation" onRender={callback}>
<Navigation props={...props} />
</Profiler>
<Main />
</App>
);
}
Onrender callback:
React calls this callback function when any component in the profiler’s component tree commits an update. Its parameters describe what was rendered and how long it took.
function onRenderCallback (
ID, // the ID of the profiler tree where the submission occurred
phase, // 'mount'/'update'
Actual duration, // the time taken to update committed
Baseduration, // the time it takes to render the entire tree without using memoization
Starttime, // the start time of react rendering in this update
Committime, // the time of react committed in this update
Interactions // the set of interactions updated this time
){
}