Some bad ts performance cases

[tjx666]

Steps to reproduce

I write many details in the readme of https://github.com/tjx666/ts-perf-issue

Current behavior

The cases described in https://github.com/tjx666/ts-perf-issue/tree/main still bad ts performance

Expected behavior

Improve these cases performance.

Context

https://github.com/tjx666/ts-perf-issue

Your environment

npx @mui/envinfo

``` System: OS: macOS 14.5 Binaries: Node: 20.15.0 - ~/.local/state/fnm_multishells/22122_1719478157230/bin/node npm: 10.7.0 - ~/.local/state/fnm_multishells/22122_1719478157230/bin/npm pnpm: 9.4.0 - ~/.local/state/fnm_multishells/22122_1719478157230/bin/pnpm Browsers: Chrome: 126.0.6478.127 Edge: Not Found Safari: 17.5 npmPackages: @mui/lab: 5.0.0-alpha.170 => 5.0.0-alpha.170 @mui/material: ^5.15.20 => 5.15.20 @types/react: ^18.3.3 => 18.3.3 react: ^18.3.1 => 18.3.1 typescript: ^5.5.2 => 5.5.2 ```

Search keywords: typescript, suggestion, slow, bad, performace, sxProps, createTheme, @mui/system

[siriwatknp]

Thank you so much for the detail explanations!

[mikk809h]

I just discovered that in my case, i had performance issues completely disappear when removing the @mui/icons-material package.

Then i tried downgrading to an older version and that seem to have improved my performance by a lot.

Version 5.11.11 seem to be much more stable in performance, but it requires the use of the --legacy-peer-deps flag. "@mui/icons-material": "^5.11.11"

I noted the issues happening here. (I have not tried other versions) "@mui/icons-material": "^6.1.4"

My Package.json

``` "dependencies": { "@emotion/cache": "^11.13.1", "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@fontsource/roboto": "^5.1.0", "@mdx-js/loader": "^3.0.1", "@mdx-js/react": "^3.0.1", "@mui/icons-material": "^5.11.11", "@mui/material": "^6.1.4", "@mui/material-nextjs": "^6.1.4", "@next/mdx": "^14.2.15", "gray-matter": "^4.0.3", "mdast-util-to-string": "^4.0.0", "next": "14.2.15", "react": "^18", "react-dom": "^18", "rehype-autolink-headings": "^7.1.0", "rehype-slug": "^6.0.0", "remark": "^15.0.1", "remark-footnotes": "^5.0.0", "remark-frontmatter": "^5.0.0", "remark-gfm": "^4.0.0", "remark-mdx-images": "^3.0.0", "unist-util-visit": "^5.0.0" }, "devDependencies": { "@types/mdx": "^2.0.13", "@types/node": "22.7.6", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.15", "typescript": "^5" } ```

OS Environment

npx @mui/envinfo

``` System: OS: Windows 11 10.0.22631 Binaries: Node: 20.15.0 - C:\Program Files\nodejs\node.EXE npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD pnpm: 9.9.0 - C:\Program Files\nodejs\pnpm.CMD Browsers: Chrome: Not Found Edge: Chromium (128.0.2739.54) npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/core-downloads-tracker: 6.1.4 @mui/icons-material: ^5.11.11 => 5.16.7 @mui/material: ^6.1.4 => 6.1.4 @mui/material-nextjs: ^6.1.4 => 6.1.4 @mui/private-theming: 6.1.4 @mui/styled-engine: 6.1.4 @mui/system: 6.1.4 @mui/types: 7.2.18 @mui/utils: 6.1.4 @types/react: ^18 => 18.3.11 react: ^18 => 18.3.1 react-dom: ^18 => 18.3.1 typescript: ^5 => 5.6.3 ```