I guess this comes from every style being recomputed, even with a super fast styling engine this would be a noticeable delay. Imo the real solution to this problem would be CSS variables based theming, which I think aligns with the styling engine direction.

@siriwatknp Wdyt?

I guess this comes from every style being recomputed, even with a super fast styling engine this would be a noticeable delay

@romgrk I agree, if we look at the v4 performance level, it's not excellent. The alternative UI libraries in the space are faster now. So we should aim to be faster than v4.

Now, here when I see v6 vs. v5 vs. v4. I can't help myself thinking: something is broken. What happened? We should be able to revert the changes that led to this outcome.
I suspect that the root cause is that we miss performance regression tests in each PR. If we had, I imagine that the PRs that led to this outcome wouldn't have been merged.

Do we know the root cause for the change? Between Material UI v5 and v6, if emotion is used, not much changed. Or is this mainly a docs-infra issue?

No idea about the cause. The docs pages are different though, so the system styling code isn't the only variable, we should test with a consistent test case.

I'd love to look into it but I'm busy with the design-agnostic datagrid refactor, I could come back to this next month.

I am starting to look into this. On dev mode, on the first Right to left switch it takes very long (I am testing on the current master - v7), I even got a page not responsive on one try. Consecutive switching are faster, but still slow. I will create an isolated example to see if the issue is the docs or the styled engine.

The CacheProvider from Emotion takes up most of the time when switching RTL on the docs, around 70%. I will try to reproduce in isolation to see what may be the issue. It may be something related to the docs set up, as on an isolated page it works fast.

For mode improvement, there are 2 PRs:

1. Add option to preserve theme values between modes [system] Disable theme recalculation as default behavior #45405
2. Restructure the theme (remove root ThemeProvider from _app.js) to CSS variables [docs-infra] Restructure docs theme context to CSS variables #45386

After tested with the above PRs, it's 2x faster on my dev server:

Before: 309-360ms

After: 158-169ms

I don't think RTL can be improved that much.
This is because it requires a theme change (causing React to rerender every components) and Emotion reinsert the stylesheet (e.g. from margin-left to margin-right).

I tried to test rtl isolated here: https://mui-rtl-v7.vercel.app/, it's start to get noticed after rendering 1000 card components. There may be ways to improve rtl too but it will require changes. Some conceptual ideas may include:

• generate rtl specific styles upfront, render then under the dir="rtl" selector
• don't store rtl in context if possible - not sure if we can do this, e.g. for Base UI we were investigating this, but in the end had to create a DirectionProvider

However, there may be slight improvements we can do on the docs in regards to this, there is a BIG difference between component pages vs other docs pages.