Get performance measurements from React Fiber
npm install react-performance-observer> Get performance measurements from React Fiber
``sh`
yarn add --dev react-performance-observer
react-performance-observer is a small abstraction over [PerformanceObserver]
which reports only the measurements that come from React and parses information
out of the name (See [ReactDebugFiberPerf]).
`js
import { observe } from 'react-performance-observer';
observe(measurements => {
console.log(measurements);
// [
// {
// entryType: "measure",
// name: "⚛ App [mount]",
// componentName: "App",
// phase: "mount",
// startTime: 281,
// duration: 4,
// warning: null
// },
// ...
// ]
});
`
Or if you want to create your own PerformanceObserver you can use just theparseEntry() method.
`js
import { parseEntry } from 'react-performance-observer';
let observer = new window.PerformanceObserver(list => {
list.getEntries().forEach(entry => {
console.log(parseEntry(entry)); // parsed entry or null
});
});
``
This code was largely based on [react-perf-devtool] by @nitin42.
[PerformanceObserver]: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver
[ReactDebugFiberPerf]: https://github.com/facebook/react/blob/8227e54ccf32f47e4c6bf5f30d08f84b8fed455d/packages/react-reconciler/src/ReactDebugFiberPerf.js
[react-perf-devtool]: https://github.com/nitin42/react-perf-devtool/blob/eae41fcad84749bf37aaad6491dffc7924e84955/src/shared/parseMeasures.js