Get performance measurements from React Fiber

react-performance-observer

Get performance measurements from React Fiber.

Install

yarn add --dev react-performance-observer

Usage

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.

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 the
parseEntry() method.

import { parseEntry } from 'react-performance-observer';

let observer = new window.PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    console.log(parseEntry(entry)); // parsed entry or null
  });
});

GitHub