Introduction
Material-UI is a popular components library (a competitor of Reactstrap that unifies React and Material Design, the desig...
For further actions, you may consider blocking this person and/or reporting abuse
It would be very interesting to dive in the "Why". What is the cause of this performance loss ? Is it due to
<Box>only ? Can you avoid it somehow ? etcI agree 100%! But I wanted to keep this article short (and didn't quite succeed did I?). Material for another article I guess ?
It's quite short and precise. I love it.
Great post @gaelferrand ! I wish I read this earlier so that I wouldn't feel like banging my head on the wall. Thanks to React MUI, I surprised myself finding out my to-be-upgraded portfolio site performance score (lighthouse) were 46% and 6% on desktop and mobile respectively.
Frankly, I just have no idea where to start fixing after spending lots of time with MUI. Maybe I should be seriously thinking about rewriting all those styles using good old SCSS(?!)🤔
Thanks for the kind words, and of course, there's a bit of click-baiting here, you're a 100% right, Material-UI is by no means a dead-end. That said, I think it's important to keep in mind that behind its very practical and polished components-library, it has performances issues. Some teams might consider it too big of an issue to go with it!
I'm disappointed that your investigation stops as soon as you remove the MUI components, and that without any further investigation, you decide that MUI is just a bad library and should be avoided by everyone.
Did you put any effort into figuring out why the component was killing rendering performance? I'm guessing you had some variable that was affecting the JSS object, which in turn was causing the dynamic stylesheets to be updated on every scroll event. Just a guess.
I don’t use it because I don’t want my site to look like google. Also not a fan of material design.
It is a dead-end for me, in the same way, Angular is a dead-end for me.. I made the conscious decision to ignore anything that says "material-UI" or "Angular" and focus my time wisely on other things; Using MUI is like learning a new language of "tags". I am happy with plain Html / jsx and CSS. (or another simpler framework like plain bootstrap)
I'll start considering other options for future projects. More than 42 simple items in a list and you'll start noticing the performance issues.
If you are thinking about using infinite scroll with MUI forget about that, it's going to be horrible performance and supper laggy.
I've even tried to use some virtualization options, but they are laggy per se if the items have a little bit of more than 2 nodes in the inner layout.
Really unhappy with this 😪
Material UI does have a github site and they promise to watch all issue submissions. Please create an issue.
Performance issues have been submitted before (I put the link of a PR in the article). They're working on it and hopefully sometime soon the lib will be solid
I had a similar problem with Box etc, mostly based on the fact that the way MUI uses JSS causes vast numbers of things to be added as styles, constantly... In fact in my app "insertBefore" for a style was taking 60% of the rendering time, and goodness knows how much the rest was doing. I found a reasonably easy fix by replacing box with my own version and changing makeStyles from MUI to my own version that caches better. Performance is massively improved.
Yes,
I agree with you...
Have you tried Vuetify?
This comment is irrelevant with this post. Thanks
As far as i know vuetify is for Vue only
Does it work with React ?
everybody know mui has
And now that it's 2022 and it's called MUI, how does it compare now?
Material UI v5 was benchmarked to be much faster than Material UI v4 in the case considered by the blog post. You can read this comment for more details: github.com/mui/material-ui/issues/....
(MUI is the name of the organization, Material UI is one of the open source projects)