Monitor React application frame times

Usage no npm install needed!

<script type="module">
  import reactFramestats from '';


React Frame Stats

react-framestats is a performance monitoring tool for React applications. Drop a PerfPanel component into your application and it will measure the duration of each frame and display:

  • the number of dropped frames in the last five seconds and
  • the longest frame over the same period.

In addition, if you call recordRender(componentName: string, reason: string) in your appropriate shouldComponentUpdate, the perf panel will display:

  • how many times the top components have been rendered,
  • and the six most recent rerenders.
import {PerfPanel, recordRender} from 'react-framestats';


render() {
    return (
            <PerfPanel />