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(?!)🤔
Brother use tailwind css you will be amazed by performance
But what about reinventing the wheel again and again for each project? Do not wanna spend too much time on this things that does not make too much difference when thinking about them in terms of business value and delivering something to the end user. It is just taking too much time to write, test, and let's not forget to maintain.
The way to use is such that whenever you need a component specific to a thing which is used very frequently such that a Accordion or something like that then only use that component from mui otherwise use only tailwind css. Thats 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.
What I do is nowadays i dont use mui at every component. Using every component of mui would make application too slow its 100% right so instead i try to avoid to use mui as much as i can instead i use tailwind css as much as i can and only use mui special stylish components like textbox or sidebar or buttons which has ripple effect instead I dont use mui. I prefer tailwind css more.
everybody know mui has
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!
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)
Hmm, I am onboard with bootstrap but do not think we can leverage Bootstrap to develop and ship features and business values as fast as MUI with a fairly good enough acceptable UI/UX. Can we? Just looking for an answer about what others do if they do not use MUI.
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.
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'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 😪
What I do is nowadays i dont use mui at every component. Using every component of mui would make application too slow its 100% right so instead i try to avoid to use mui as much as i can instead i use tailwind css as much as i can and only use mui special stylish components like textbox or sidebar or buttons which has ripple effect instead I dont use mui. I prefer tailwind css more.
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)
I don’t use it because I don’t want my site to look like google. Also not a fan of material design.
Then antd? I am just really looking for an answer about what others do, you cannot reinvent the wheel again and again, can you? I really need to find a good lib to use in my app, any suggestion?
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 ?
So what would you suggest? build the wheel again and again or coming up with our own framework? I am just thinking of a way to work faster on what matter and not spend too much time on what does not.
This is just a React problem in general. When we are using VDOM and making components out of every little thing. This happens.