There is a tool called
react-addons-perf that should be imported into your project.
import Perf from 'react-addons-perf';
window.Perf = Perf;
After that you can use
Perf object in your console.
It can tell you about your react performance issues, not including redux.
For instance, you can check unnecessary renders or unnecessary change calculations:
// do whatever you want to measure
Perf.printOperations(); // to show DOM manipulations
Perf.printWaisted(); // to show unneeded calculations for components which remained the same afterwards
Here’s more on that — https://reactjs.org/docs/perf.html.
And of course you can use Chrome DevTools’ timeline.
If you have a lot of DOM manipulations, first you should check that all your lists have
key param. And it should be something unique, and not some randomly generated number or just array’s index. So, the key should depend on the content.
If you have a lot of redundant diff calculations, then try to switch to PureComponent or maybe use Reselect for memoization.
Reconciliation process (diffing new component tree with the old one) is described in details here — https://reactjs.org/docs/reconciliation.html.
More on benchmarking and optimizations you can find on
Quick video to understand the basics:
Also you can check this video (in russian):