react-component / react-component/tree

Multiple react re-renderings when updating tree data

Open
#798 2 comments 4 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

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:

  1. Expand all Elements
  2. Toggle Switch Button of single Element
  3. Internally: object treeData will be completely recalculated and passed into rc-tree component
  4. Expected results:
    • I expect here, that rc-tree will be re-rendered 1 time (because treeData has changed)
    • I expect here, that only single CustomTreeNode will be re-rendered, which Switch component I have toggled on step 2.
  5. Actual results:
    • rc-tree component re-rendered 3 times instead of 1 -> NOK
    • only one CustomTreeNode will 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:
rerenreding-1

Re-rendering no.2:
rerenreding-2

Re-rendering no.3:
rerenreding-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

  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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.