how can I use material-ui's TreeView, where all the data is in a single source of truth javascript data structure, and avoid rerenders on parts of the subtree that have not changed (using an identity check on the inputs) when modifying the data (adding/removing/renaming nodes, changing the selection, changing the open/close state, etc.)? There are no examples of this on https://material-ui.com/components/tree-view/, and using the "rich object" example for large-ish wide trees (~1000 elements, for example in a full binary tree), rerendering everything takes about one second on my computer.
By doing it manually, or by using immutable data structures libraries, it is possible for the input tree to reuse subtrees from previous renders when modified. For example, given the following tree,
A
/ \
B C
/ \ \
D E F
If you want to add a child X to F, then you would create new nodes for X, F, C, and A, but you could keep the B, D, and E nodes.
How can we take advantage of this to get acceptable performance (<50ms I would say, ideally only a few ms) for large wide trees?