Material UI Potential Slow Performance of withStyles

Question

I'm tasked with making a page in our react redux web app load faster.

When the action for loading the page triggers we get what appears to be a small freeze of roughly .5 sec.

I have the profiler open and at first glance nothing seems to be wrong.
Flame Graph

There are no unnecessary rerenders, and the only yellow warning that is shown is roughly 10 milliseconds.

When I go to the ranked tab in the profiler I get a slightly different story where I find that the majority of the time is spent in withStyles().
Ranked Graph

We use the material-ui approach of CSS in JS via withStyles() and it appears as if the use of WithStyles() is significantly affecting the load speed.
Is this the case? or is this simply a case of "I'm rendering too many things at once"

It would be a significant effort to convert the CSS in JS to just CSS, although I did spend an hour ripping out the CSS in JS and found a performance improvement of about 40% although it is unknown to me how much of that 40% is due to the withStyles versus just the performance of styling elements on a page.

Answer 1

+90% of the time spent in WithStyles is actually spent in JSS, there very few we can do about it on Material-UI side.

From

Although, there is a possible speed up that doesn't include re-writing you JS CSS styling approach, which is switching to makeStyles instead of withStyles

Can be found out here