[TreeView] Performance issue on TreeView with large data set

[satyajitrout58]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://stackblitz.com/edit/react-eywhbq-ldiizc?file=Demo.tsx,index.tsx

Steps:

1. Collapse tree items which all have subitems inside them. It takes some time to display.
2. Click on the Add Item button to add a new item to the existing tree items.
3. When we have more than 5,000 tree items if we collapse or add any item stack overflow and page unresponsive error is coming.

Current behavior 😯

1. When we have more than 1000 items there is a delay while collapsing tree items.
2. When we have more than 5,000 tree items if we collapse or add any item stack overflow and page unresponsive error is coming.

Expected behavior 🤔

1. All the operations should be faster when we have more than 1000 tree items

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

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

Order ID or Support key 💳 (optional)

No response

[noraleonte]

Hey @satyajitrout58 👋

Thanks for opening up this issue being interested in the TreeView 🤙

Right now the component is not particularly optimized for supporting large datasets, but performance optimization in this sense is one of our main priorities for the upcoming months as we are redirecting more effort towards developing the TreeView.
I renamed and labeled the issue accordingly, and we will update you here once we have an improvement.

[DirKraft91]

@flaviendelangle, @noraleonte Has it been fixed? Seeing the same problems with 1000 elements and more...

[flaviendelangle]

Hi,

This is not something we can "fix", in order to support large dataset we need to introduce virtualization.
We did some optimizations on the internals of the Tree View to avoid extensive computations, and we have others to do (e.g.: switch to a subscription model for the item updates so that when you do a change that only impacts one item visually, then the other items do not re-render).
But to have good or even decent performances on large datasets, the only viable option is to no render every item, otherwise you always end up with super long mounting time and super long update time on interactions that impact all the items (selecting all of them using Ctrl + A for instance).

I'm exploring what virtualization could look like in #13520.

In summary, here are the big steps of performance improvement in the Tree View:

• Reduce complexity on Tree View internals (do not loop on the items whenever we can avoid it)
• Add virtualization to only render the items visible in the viewport
• Let the items subscribe to the data they need instead of using api methods so that we can use React.memo on them

[flaviendelangle]

By the way, I used this issue to track the 1st big step, I'll close it now that this one is over.
You can have a look at #9685 for the next step 👍

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@satyajitrout58: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.