MUI 5 speed issues - very slow

[timothyarmes]

Hi,

I've just converted a fairly complex project from Material UI v4 to Mui v5. The initial conversion was fairly painless, about half a day, however removing all the makeStyles was painstaking work and I did it over a two week period.

Everything now works perfectly, however the site is now so much slower that it's practically unusable. For example, a route change that was maybe 0.5seconds before now takes about 5 seconds.

Is anyone else experiencing similar issues?
Can anyone suggest ways in which I can profile the rendering to see if there are now certain bottlenecks that I can improve?

[eps1lon]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[timothyarmes]

While I appreciate that this is vague, obviously this isn't something that I can create a sandbox for. The site is complex, and the whole thing is now very slow, with the only change being the migration.

That's why I'm currently asking to see if other adopters are experiencing this, and requesting help to understand how I can profile Mui to see where the rendering issues are coming from. Once I have things more nailed down then I may be able to come back here with something more concrete.

[ArashZich]

Hi
I have the same problem ;(((((

[timothyarmes]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

This is actually a pretty serious issue, and one for which, as I said above, we can't provide a code sandbox. Marking the issue as incomplete in this case is brushing it under the carpet since it's easy to leave issues with these labels go unresolved. Can we remove the label so that we can engage some more useful discussion?

[eps1lon]

Generic "this is slow" issues tend to be a dumping ground for all sorts of performance related symptoms even if they have different underlying issues.

Without a repro we won't be able to ascertain how we can work on this issue. It may be something we can fix on our side. It may be something we can warn about. It may be something that is inherent to our styling engine, or React or the browser.

We are not "brushing it under the carpet" since the issue and its comment history will always be available.

This is actually a pretty serious issue, and one for which, as I said above, we can't provide a code sandbox.

Depending on the seriousness, I suggest you check our premium support.

Can anyone suggest ways in which I can profile the rendering to see if there are now certain bottlenecks that I can improve?

This is a general support request that's better asked in more general channels. As a rough pointer, I suggest getting comfortable with profiling with React Developer Tools.

[timothyarmes]

Generic "this is slow" issues tend to be a dumping ground for all sorts of performance related symptoms even if they have different underlying issues.

I appreciate that. I'm not asking you to fix something that you can't see, however if this is a generalised issue that people are having with v5 then by getting our heads together we may to able to find some common causes. For that, we need to know how we can help the team get to the bottom of it.

It may be something that is inherent to our styling engine, or React or the browser.

The performance of my app is 5-10x slower since moving to Mui 5. It's the only change in my code base, so I'm pretty sure I can rule out React and the browser, and it seems reasonable to suspect the new styling engine is most likely the involved somehow.

Off the top of my head I can think of any number of causes. Perhaps...

• the engine is just much, much slower (that would be tragic)
• there are a few container components that are now really slow, and I can get the performance back to normal by avoiding them.
• I need to avoid using the new sx prop
• my Mui set up is wrong

This is a general support request that's better asked in more general channels. As a rough pointer, I suggest getting
comfortable with profiling with React Developer Tools.

I am comfortable with these tools, but I can't find a way to profile just Mui to see where the bottle necks are.

For info, if I use dev tools to profile the v4 version of my app on a route change, I get this:

The same route change using v5:

[eps1lon]

This is a general support request that's better asked in more general channels. As a rough pointer, I suggest getting
comfortable with profiling with React Developer Tools.

I am comfortable with these tools, but I can't find a way to profile just Mui to see where the bottle necks are.

For info, if I use dev tools to profile the v4 version of my app on a route change, I get this:

You've linked to images using the Chrome Developer Tools not the React Developer Tools. These are two different things. That's why I included the link to the React Developer Tools so that you can get familiar with it. The React Developer Tools should help you find out which components are the bottleneck.

The performance of my app is 5-10x slower since moving to Mui 5. It's the only change in my code base, so I'm pretty sure I can rule out React and the browser, and it seems reasonable to suspect the new styling engine is most likely the involved somehow.

It may be a change in our code, but that may have triggered a bad path in React etc. So the speculation doesn't help anybody which is why we really do need a repro.
In the migration to v5 you had to make changes to your codebase as well so it's not clear if the issue really lies with our code.

I appreciate the input but please folllow instructions of the maintainers. We're trying to help not trying to put blame of performance problems on other people. But we can only help if you're willing to engage in the conversation.

[timothyarmes]

This is a general support request that's better asked in more general channels. As a rough pointer, I suggest getting
comfortable with profiling with React Developer Tools.
I am comfortable with these tools, but I can't find a way to profile just Mui to see where the bottle necks are.
For info, if I use dev tools to profile the v4 version of my app on a route change, I get this:

You've linked to images using the Chrome Developer Tools not the React Developer Tools. These are two different things.

Yes I realise that, I just wanted to show the performance difference.

That's why I included the link to the React Developer Tools so that you can get familiar with it. The React Developer Tools should help you find out which components are the bottleneck.

I've been spending a lot of time looking at the profiling output in the React developer tools. I haven't yet found an obvious bottleneck.

The performance of my app is 5-10x slower since moving to Mui 5. It's the only change in my code base, so I'm pretty sure I can rule out React and the browser, and it seems reasonable to suspect the new styling engine is most likely the involved somehow.

I appreciate the input but please folllow instructions of the maintainers. We're trying to help not trying to put blame of performance problems on other people. But we can only help if you're willing to engage in the conversation.

Please don't get me wrong, I'm not trying to blame anyone. By opening this ticket I'm hoping to see if this is a problem that other adopters are also experiencing. If it is, we can work together to try to figure it out. Engaging in conversation is precisely what I'm asking for. Currently I feel that the response is simply "No repro, no way we can help".

It may be a change in our code, but that may have triggered a bad path in React etc. So the speculation doesn't help anybody which is why we really do need a repro. In the migration to v5 you had to make changes to your codebase as well so it's not clear if the issue really lies with our code.

As for the repro, that's an incredibly hard thing to provide. I fully understand why that would be useful, however it's not like I have a specific bug that I can isolate and recreate. That would be great. Instead I have a complex web app that's now rendering much more slowly in general. I don't know what I could give you to reproduce it.

[alebrahimi]

I have the same problem

I'm using the Meteor.js framework

everything was fine in MUI 4

when I upgraded to MUI 5 every page containing any MUI component lag just on the first load

I tested the same react code outside Meteor and it's working very fine

this is my dependencies :

"dependencies": {
"@babel/runtime": "^7.15.3",
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/icons-material": "^5.0.4",
"@mui/lab": "^5.0.0-alpha.51",
"@mui/material": "^5.0.4",
"@mui/styles": "^5.0.1",
"@mui/utils": "^5.0.1",
"meteor-node-stubs": "^1.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^5.2.1",
"react-router-dom": "^5.3.0"
},