React Performance measurement with ReactJS


You can't improve something you can't measure. To improve the performance of React components, you should be able to measure it. ReactJS provides with addon tools to measure performance. Import the react-addons-perf module to measure the performance

import Perf from 'react-addons-perf' // ES6
var Perf = require('react-addons-perf') // ES5 with npm
var Perf = React.addons.Perf; // ES5 with react-with-addons.js

You can use below methods from the imported Perf module:

  • Perf.printInclusive()
  • Perf.printExclusive()
  • Perf.printWasted()
  • Perf.printOperations()
  • Perf.printDOM()

The most important one which you will need most of the time is Perf.printWasted() which gives you the tabular representation of your individual component's wasted time

enter image description here

You can note the Wasted time column in the table and improve Component's performance using Tips & Tricks section above

Refer the React Official Guide and excellent article by Benchling Engg. on React Performance