Reduce necessity of tree full tree walk

I was curious if you had considered any performance optimizations around the need for a full tree walk. I think one of the great parts of the iterator model is that you have the ability to progressively walk the tree as the user scrolls.

Couple this with the consistent height of elements, and it’s possible to calculate what element you need to start iterating from to service any request.

Curious if performance optimizations like those were ever intended to be a part of react-vtree or if that’s not the problem you’re trying to solve.

[Lodin]

@AlokBisht, yes, that’s what I’ve done in fix/performance-on-big-data branch (diff). And while it helps improving the performance a bit, it is still restricted with the necessity to re-create the array of node IDs according to the openness state of nodes. So, basically, the algorithm breaks to the following steps:

1. Initial step. Runs only when the treeWalker changes (it also means that the tree data is changed). It is defined by refresh boolean value sent as the parameter to the treeWalker function. If the refresh is true I have to give the component the new node data.

const isOpened = yield refresh
  ? { // This is the data returned on initial step
      id,
      isLeaf: node.children.length === 0,
      isOpenByDefault: true,
      name: node.name,
      nestingLevel,
    }
  : id;

1. Visibility update step. Runs each time the node open/close action is performed. refresh is false, and I need to return only the ID of the node which goes to the array that is used as a source for the react-vtree. This array’s existence seems inevitable to me because it is necessary for displaying visible nodes. Each time the node opens and closes its children have to be shown or hidden, and I haven’t found another way except for running the treeWalker each time to get IDs of visible components. Hidden components are just not traversed.

The tree traversing is the bottleneck as I can see. Traversing the whole tree of such size and creating a giant array freezes page for the noticeable time. I already changed the treeWalker example: it uses pointers instead of a stack but it still takes too much time to work. So I would be glad to hear any thoughts on how to reduce the complexity of this operation.

[Lodin]

As I already mentioned in #30, I believe I have solved the performance issues with the tree updates. It still takes some time to build the tree from scratch but at least you may be free from UI freezing when nodes open/close.

@AlokBisht, sorry, no metrics for the performance, I’m checking the speed by hands only.