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 https://facebook.github.io/react/docs/perf.html for more information.
Note: react-rpm only works when using the development build of React.
Step 1: Install Chrome DevTool
https://chrome.google.com/webstore/detail/react-rpm/ifaijhlkcmaimeaafnapdfmkghneffbp
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;
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!