Multiple react re-renderings when updating tree data

[Oleksandr Malyutin]

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:

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