Material UI Potential Slow Performance of withStyles

css reactjs performance material-ui css-in-js
moondc picture moondc · Jul 29, 2019 · Viewed 8.1k times · Source

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

Sultan H. picture Sultan H. · Jul 29, 2019

+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

Related questions

React.js inline style best practices

I'm aware that you can specify styles within React classes, like this: const MyDiv = React.createClass({ render: function() { const style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); Should I …

Read More
How to add multiple classes to a ReactJS Component?

I am new to ReactJS and JSX and I am having a little problem with the code below. I am trying to add multiple classes to the className attribute on each li: <li key={index} className={activeClass, data.class, "…

Read More
React Js conditionally applying class attributes

I want to conditionally show and hide this button group depending on what is passed in from the parent component which looks like this: <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on …

Read More