React. Benchmarking and optimizing performance

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

import Perf from 'react-addons-perf';

window.Perf = Perf;

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:

Perf.start();
// do whatever you want to measure
Perf.stop();

Perf.printOperations(); // to show DOM manipulations
Perf.printWaisted(); // to show unneeded calculations for components which remained the same afterwards

Perf.start();

// do whatever you want to measure

Perf.stop();

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
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

React. Benchmarking and optimizing performance

Similar Posts

LEAVE A COMMENT Отменить ответ