react-component / react-component/tree
Async loadData and virtualization do not work well together
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 490
- Avg merge
- 3d 17h
- Merged PRs (30d)
- 5
Description
I am a React developer for a private company. I was recently tasked with enabling virtualization, I thought I could set the treeHeight and everything would work. This was not the case. When I enabled treeHeight, everything broke. I had tried everything. I am currently at the point where I control loadedKeys, expandedKeys, and the scroll position. I have a boolean useState which I use to toggle to rerender the tree anytime anything changes. Basically, if loadData returns children that have grandchild, the virtualization breaks and if you scroll past the viewable area it shows how everything is blank because it only renders what is necessary, per specification of what virtualization is supposed to do, but pre-loaded grandchildren break loadData.
If you want steps to reproduce this, simply take the async load example and enable virtualization one it except one modification, have loadData return children that also have pre-loaded children. Make it a couple thousand records to really observe the virtualization. Expand multiple nodes quickly before the other nodes can load. Any of these things will break the virtualization.
If you need anymore specifics let me know. I do not have time to extract a simplified example from my company's source code. If someone really does the above instructions and it works perfectly fine let me know, but I have spent two weeks trying to fix this and the async load and virtualization features working together are super buggy. I've basically read most of the rc-tree source code in order to understand how to micromanage loadKeys and expandedKeys in order to save the internal state of the tree from the outside looking in to force the virtualization to reset itself when it breaks. If there is anything I can provide please let me know, but I don't have time to be making tons of example codes when I believe the bugginess is quite obvious.
Sorry for the long-winded response. Just trying to give as much information as I can.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the async load example and enable virtualization with treeHeight. Reproduce using children that include pre-loaded grandchildren, a few thousand records, and rapid expansion of multiple nodes; observe whether scrolling produces blank areas. Done means async loading and virtualization work together without blank rendered regions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100