react-component / react-component/tree

Async loadData and virtualization do not work well together

Open
#319 0 comments 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.