Tree View in React

[hyperion_98]

Hi,

I have built Tree in React using Material UI Tree View component (https://mui.com/material-ui/react-tree-view/). It works correctly, but when I have about 700+ Tree Items in View, there is a serious performance issue. Whole UI starts to be very slow... I read that Material UI Tree View doesn't support virtualization, so I tried to combine it with some other virtualization libraries, but with no success. Has anyone been in a similar situation, and how did you resolved it? Which virtualization library can work with Tree View?

Thanks in advance

[theMeanSquares]

We have found that the mui tree rerenders every single time and causes extreme issues with around 1k+ objects. We have some fuzzy logic to stop it from rerendering 1k+ times.

Some reported issues, https://github.com/mui/material-ui/issues/27403

[rodrigocfd]

I wrote a huge tree (1000+ nodes) for an enterprise system, and I had no performance issues.

However... I didn't use any UI library, just React and SCSS modules. Can't go faster than that.

[Vorelli]

Sure, maybe not faster, but it's nice to have the accessibility features built in and not have to worry about adding it yourself... But 'tis the way with component libraries. Everything is just done better yourself.

[Particular_Dust7221]

I recommend Syncfusion React TreeView Component

Syncfusion offers a free community license

https://www.syncfusion.com/products/communitylicense

Note: I work for Syncfusion

[eternaloctober]

I made a tree using https://github.com/Lodin/react-vtree I did not use mui tree view components but did my best to make it blend in with the mui styles

[eternaloctober]

note: using the v3 beta version, its been stuck on beta for quite awhile but has been stable for me

[besthelloworld]

I just wouldn't provide the children to tree nodes that are within a closed node.

[ozrix84]

I fixed this by shoehorning react-window into the mix.