https://github.com/jamiebuilds/react-performance-observer
Get performance measurements from React Fiber
https://github.com/jamiebuilds/react-performance-observer
debug devtools measurements perf performance react
Last synced: 6 months ago
JSON representation
Get performance measurements from React Fiber
- Host: GitHub
- URL: https://github.com/jamiebuilds/react-performance-observer
- Owner: jamiebuilds
- License: mit
- Created: 2018-05-16T19:11:23.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-16T19:11:54.000Z (over 7 years ago)
- Last Synced: 2025-04-10T01:12:00.300Z (6 months ago)
- Topics: debug, devtools, measurements, perf, performance, react
- Language: JavaScript
- Size: 35.2 KB
- Stars: 208
- Watchers: 5
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-performance-observer
> Get performance measurements from React Fiber
## Install
```sh
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]).
```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 the
`parseEntry()` 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](https://github.com/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