[tree view] Performance issue

[oliviertassinari]

Steps to reproduce

Steps:

1. Open https://mui.com/material-ui/customization/default-theme/?expand-path=$.palette
2. Open one of the tree item

Screen.Recording.2024-09-15.at.03.07.55.mov

Current behavior

It takes 200ms to respond, on a high-end laptop

Expected behavior

It takes 20ms to respond, on a high-end laptop

Context

I have noticed this from: https://pagespeed.web.dev/analysis/https-mui-com-material-ui-customization-default-theme/af76fe8h6e?form_factor=desktop. The field data says the page is too slow:

It was so much faster in https://v5-0-6.mui.com/customization/default-theme/ before we moved to use the tree view.

We could potentially use React.useDeferredValue like in mui/material-ui#43569 for the checkbox lag but it won't solve the root problem.

To be noted that #9685 might be needed to solve the switch all case, but for expanding a node of 5 items like in my screen recording, it can't be the solution.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: -

[flaviendelangle]

I have 2 main ongoing topic for performances:

• [RichTreeViewPro] Add virtualization #13520 => for big dataset
• [TreeView] Introduce selectors #14210 => for interactive Tree Views, even in small datasets

And then we have regular optimization, some code might be badly designed right now.
But I expect the selectors to be a good milestone, re-rendering only the Tree View + a handful of items when toggling the expansion of one item should help a lot compared to today.