Profiler

Advertisement

Profiler measures React application renders.

And the “cost” of rendering.

Its purpose is to help identify parts of an application that are slow.

It benefit from optimizations such as memoization.

It provides:

  • id, // the “id” prop of the Profiler tree that has just committed
  • phase, // either “mount” (if the tree just mounted) or “update” (if it re-rendered)
  • actualDuration, // time spent rendering the committed update
  • baseDuration, // estimated time to render the entire subtree without memoization
  • startTime, // when React began rendering this update
  • commitTime, // when React committed this update
  • interactions // the Set of interactions belonging to this update

E.g.

import { Profiler } from 'react';

function App() {

	function callback(
		id, // the "id" prop of the Profiler tree that has just committed
		phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
		actualDuration, // time spent rendering the committed update
		baseDuration, // estimated time to render the entire subtree without memoization
		startTime, // when React began rendering this update
		commitTime, // when React committed this update
		interactions // the Set of interactions belonging to this update
	) {
		console.log( `id: ${id}`);
		console.log( `phase: ${phase}`);
		console.log( `actualDuration: ${actualDuration}`);
		console.log( `baseDuration: ${baseDuration}`);
		console.log( `startTime: ${startTime}`);
		console.log( `commitTime: ${commitTime}`);
		console.log( `interactions:`, interactions );
	}
	
	return (
		<Profiler id="App" onRender={callback}>
			<h1>Hello World</h1>
		</Profiler>
	)
}

export default App;

// CONSOLE LOG:
//
// id: App
// phase: update
// actualDuration: 0.08499999972991645
// baseDuration: 0.04500000074040145
// startTime: 888181.0700000005
// commitTime: 888181.4500000001
// interactions: Set(0) {}
%d bloggers like this: