Comments (4)
To follow up on this: I modified my generator such that it doesn't produce the child nodes for a parent that is collapsed. This seems to solve my performance problem, but it makes the built-in expanded/collapsed state management useless, and requires me to provide a new treeWalker
to rerender the entire tree every time a node is toggled. This really feels far from optimal. I'd like to understand if I'm missing something, or if this is the intended design.
from react-vtree.
Hi @murrayju
It seems that my provided
treeWalker
generator is being walked to visit every node in the tree, even though most of the nodes are not visible (collapsed).
The treeWalker
generator is designed to be flexible. If you don't want to provide all the tree data at once, you could use the async approach (code, demo). So the user will get only the information they requested while the tree won't suffer from unnecessary data processing.
There is a very noticeable (few seconds) delay on expanding/collapsing nodes (because the walks the tree again).
Actually, only the 2.x.x
version used treeWalker
both for tree building and for node expanding/collapsing operations. The 3.0.0
version introduces a new approach when the treeWalker
is used only for tree building. So it shouldn't affect the expanding/collapsing which uses the internal tree walk based on pointers. Could that be possible that you are using the 2.x.x
version instead of 3.x.x
?
However, unfortunately, for the very large trees, there still may be some delay on collapsing/expanding because the tree needs to walk through all the nodes to create (or, more importantly, re-create) the correct list of nodes to display in the virtual table. To fix that case, I would suggest considering the async approach as well.
from react-vtree.
Could that be possible that you are using the 2.x.x version instead of 3.x.x?
No, definitely on v3. I just didn't explain what I meant very well. My approach was to use useCallback
to produce a new treeWalker
whenever the expandedKeys
change (since my tree walker only walks the children of nodes that are expanded, it has to change when the expanded state changes). This in turn causes react-vtree
to rerender the whole tree.
I chose this as the better of two evils, since the alternative (treeWalker
always provides the complete tree) is way slower than only walking the expanded nodes of a mostly collapsed tree.
To fix that case, I would suggest considering the async approach as well.
I'll take a look at the async option, thanks. I shied away from this at first, since my data isn't truly "async", it is all in memory already.
I created this ticket mostly because I find it surprising that the library should have to walk the generator for nodes that are not visible. Perhaps you are optimizing for something else that I'm not aware of? I could look into making a fork if my use case is just different from others, but I'd like to understand why yours is designed this way first.
from react-vtree.
Perhaps you are optimizing for something else that I'm not aware of?
The initial goal was to optimize the display of the tree. When the treeWalker
works, it creates an internal representation of a tree that consists of two elements: a tree object connected via pointers (parent-child-sibling) and an array of node ids to send to the react-window
virtual table.
Whenever the treeWalker
is changed, the internal representation is re-created from scratch. That's a very time- and resource-consuming operation because there is a lot of memory allocation for objects and the array. So I recommend using it either once at the start or via an async approach. If it is essential to not freeze the whole UI during the tree building, it is also possible to specify a placeholder
property that will make tree construction asynchronous. So you can just show the user a spinner until the tree is prepared. The approach is described here (code, demo).
For expanding/collapsing, the internal tree walk is used. As I described above, it just walks over the tree using the pointers and updates the tree node visibility state. However, in my previous explanation, I made a mistake: not all the nodes are visited during that walk but only a subtree of a node that is triggered. When the walk is over, the prepared sub-array is injected via Array.prototype.splice
into the main react-window
array. If you have big branches, that may take some time but according to my experiments, the lag is not big and happens mostly because of GC.
Hope that explanation will help you.
from react-vtree.
Related Issues (20)
- React VTree example is not working HOT 1
- how to close all nodes HOT 2
- Returning undefined from treeWalker throws error HOT 2
- Filtering of nodes HOT 1
- scroll to item as a prop HOT 2
- [help] async example HOT 1
- Changing async tree shape re-opens nested items HOT 1
- Bump React version to 17
- children type NodeComponentType not exposed for consumption HOT 1
- Are there plans to release 3.0.0 soon? HOT 2
- I didn't find any where in the readme about sorting & filter feature ? HOT 1
- Expose row index to Node renderer HOT 3
- [v3.0.0-beta.3] (Safari) ReferenceError: Can't find variable: requestIdleCallback HOT 1
- Build fails with Typescript version v4.4 HOT 1
- The expanded children nodes are expanded even when we collapsed at the parent level. HOT 1
- Collapse specific row HOT 1
- How to update tree after dynamically modifying nodes height? HOT 1
- Setting component state onClick causes the tree to lose focus position during keyboard navigation and go to top of the rendered tree HOT 2
- Show/hide leaf nodes by outer prop HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-vtree.