Skip to content
React-RPM is a Chrome DevTool that provides real-time performance and efficiency measurements for React applications
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.babelrc mods for ui changes May 23, 2017




React-RPM | Real-Time Performance Metrics

react-rpm is a Chrome DevTool that displays clear and customizable visualizations of your React app's performance metrics.

react-rpm relies on React's built-in Perf tool, which is designed to log performance data as you use your React app. Though React is already fast, its diffing algorithm may cause unnecessary re-renders, which can result in performance issues in large, complex apps. To optimize the diffing algorithm, React provides a shouldComponentUpdate() hook. Incorporating React's Perf tool, react-rpm shows you exactly where your app can be optimized. See for more information.

Note: react-rpm only works when using the development build of React.

Setup Instructions

Step 1: Install Chrome DevTool

Step 2: Set up react-rpm node module in your project

# Install react-rpm
$ npm install --save-dev react-rpm
// Import react-rpm in entry point or App.js/Top Level Component
import react-rpm;

Using react-rpm

React-rpm gathers performance data based on sessions, which are instigated by user interaction. Upon opening the DevTool, you'll be prompted that react-rpm is listening for renders. The dashboard will appear once performance data has been collected, and is ready to display.

While viewing timeWasted in the component view, react-rpm categorizes your components with color flags:

  #red: has current timeWasted in last render session
  #green: has had timeWasted in previous renders, but no timeWasted in last render session
  #gray: has not registered any timeWasted in lifeCycle of app.

More extensive documentation coming soon!

You can’t perform that action at this time.