React. Benchmarking and optimizing performance

There is a tool called react-addons-perf that should be imported into your project.

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:

Here’s more on that —

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 —

More on benchmarking and optimizations you can find on

Quick video to understand the basics:

Also you can check this video (in russian):

Similar Posts