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 — 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
https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad
and
https://medium.com/chingu/react-application-performance-analysis-part-1-611976a54de7.

Quick video to understand the basics:

https://youtu.be/b8IcYOV5_Rc

Also you can check this video (in russian):

https://youtu.be/N4cO4Y1EHhs

LEAVE A COMMENT