Debug performance of your React application
JavaScript CSS
Latest commit b041260 Dec 16, 2016 Ramon Gebben 0.2.0


Package Quality Build Status Gitter npm version license

ReactPerfTool tries to give you a more visual way of debugging performance of your React application. It does this by using the addons delivered by the React team and community to get measurements and visualize this using graphs. This makes it easier to spot bottlenecks.



npm i react-perf-tool react-addons-perf -D
import ReactPerfTool from 'react-perf-tool';
import Perf from 'react-addons-perf';

export default function YourApp(props) {
  return (<div className="your-app">
    {/*...yourApp */}
    <ReactPerfTool perf={Perf} />


If you want to contribute just fork the project and start working on one of the open issues or on your own ideas. When you are done you can open a pull request.

Code style

The project uses a trimmed down version of the Airbnb Javascript styleguide, and can be checked by running:

npm run lint


For testing the project uses Mocha and Chai. For testing of components the project uses Enzyme.


  • npm run build - produces production build
  • npm run dev - start webpack watch
  • npm run test - runs the tests and lints
    • npm run lint - lints all the code
    • npm run test:unit - run only the unit tests
    • npm run test:component - run only the component tests