How to reduce CPU load in React?

Question

css

There is a structure like this

When the nav collapses, the width of content and all items increases.
Of course, the load on the CPU for a couple of seconds is about 99%
And of course, all this is accompanied by nav animation and items grow accordingly .
I tried transform: translateZ (0); and will-change: width
But apparently I put them in the wrong place, it didn’t work
Help and explain how to optimize the load on the CPU correctly

Answer 1

Unfortunately, only the Performance tab will help you. Look in it, what specifically takes more time. It seems to me that this is Layout and JS has nothing to do with it.
JS is the cause, of course, but the problem may be on another level.
I would suggest reading this article . And it has a huge amount of useful information, including courses from udacity

Answer 2

It is difficult to answer without code, because there are several nuances:
1. Does the menu physically exist after closing or is it deleted?
2. Are elements re-rendered when collapsing? If yes, why?
3. How does the width of elements change? Do you calculate the width from zhs and set it to each element or is it implemented at the kss level?
4. What type of components do you have?
5. Is shouldComponentUpdate used?

Answer 3

I'd look to see if you have something in your app listening for width changes. Maybe when changing the width, all individual content elements are redrawn, which creates load.

Answer 4

Almost certainly 99% of the time you are changing the DOM of objects that are not even visible on the screen, so set their actual movement to scroll, moving only those elements that are currently visible on the screen.
If you really need a complex animation where the elements move independently (otherwise they could be placed in a single div and move it as optimally as possible), then yes, you have a problem and you will have to change the tools used. For example, SVG works a little more efficiently, and canvas and, of course, 3d rendering using video accelerators are even more efficient.
ps It is the HTML DOM that creates 99% of the problems, it usually takes a lot of time to change it.