react-component / react-component/tree

Tree.render() slow for large shallow trees

Open
#80 7 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
1.3k
Forks
490
Avg merge
3d 17h
Merged PRs (30d)
5

Description

It seems that the way that rc-tree renders Tree makes minor updates (such as expanding or selecting a single node) very slow for large trees. This appears to be optimized in the case of deep trees (i.e. many elements hidden behind folders), but not for shallow trees (fewer elements, not hidden by folders).

A simple case be shown with the big-data example. When using x=5, y=500, z=1, there are 1252505 total nodes, but selecting elements is still snappy. When using x=500, y=5, z=1, there are 15500 total nodes, but selecting elements can take up to a second to update.

This might be a no-fix, but it would be helpful for simple actions such as select or expand to only update the relevant nodes. Otherwise interacting with the tree starts feeling laggy above 500 nodes, which seems small compared to other frameworks' TreeViews...

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 linked big-data example and compare selection and expansion responsiveness for the two supplied tree shapes. Profile the Tree.render() update path to identify why shallow trees are slower. Done means minor interactions remain responsive for the reported large-tree cases, with a regression test or benchmark covering the improvement.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.