react-component / react-component/tree
Multiple react re-renderings when updating tree data
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 490
- Avg merge
- 3d 17h
- Merged PRs (30d)
- 5
Description
Disclaimer: I use the term re-renderings. By this term here I mean react re-renderings and not browser re-renderings.
I have prepared a code example to reproduce the issue: codesandbox
Code example can be tested in separate window: separate window
Steps to reproduce:
- Expand all Elements
- Toggle Switch Button of single Element
- Internally: object
treeDatawill be completely recalculated and passed into rc-tree component - Expected results:
- I expect here, that rc-tree will be re-rendered 1 time (because
treeDatahas changed) - I expect here, that only single
CustomTreeNodewill be re-rendered, whichSwitchcomponent I have toggled on step 2.
- I expect here, that rc-tree will be re-rendered 1 time (because
- Actual results:
- rc-tree component re-rendered 3 times instead of 1 -> NOK
- only one
CustomTreeNodewill be re-rendered -> OK
Example video:
https://github.com/react-component/tree/assets/8103060/78917bcd-1e21-48ce-907a-4cc2082ff8d7
Duration of re-renderings from the video for rc-tree and all of its descendants:
- re-rendering no.1: 11.6 ms
- re-rendering no.2: 6.1 ms
- re-rendering no.3: 13.5 ms
Re-rendering screenshots
Re-rendering no.1:
Re-rendering no.2:
Re-rendering no.3:
My questions are:
- Is this a known behavior?
- Is it possible to fix it? (reduce number of re-renderings from 3 to 1. This should improve performance dramatically (11.6ms vs 31.2 ms - almost 3 times faster)
Thank you for your work and thank you in advance
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 linked CodeSandbox reproduction and its separate-window example, then verify the render counts while expanding the tree and toggling one element. Done means the reproduced update causes one rc-tree render while retaining the single CustomTreeNode render reported as correct.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100