React Performance
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.
Tips & Tricks
When two nodes are not of the same type, React doesn't try to match them - it just removes the first node from the DOM and inserts the second one. This is why the first tip says
1. If you see yourself alternating between two components classes with very similar output, you may want to
make it the same class.
2. Use shouldComponentUpdate to prevent component from rerender, if you know it is not going to change,
for example
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id;
}