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
  });
});

This code was largely based on react-perf-devtool by @nitin42.