Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Multiple react re-renderings when updating tree data

Aperta
  • Qualcosa non va?
#798 2 commenti 4 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
30/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
react
Ambito
frontend, performance

Direzione di ricerca

Inizia con la riproduzione CodeSandbox collegata e il relativo esempio in una finestra separata, quindi verifica il numero di render mentre espandi l’albero e attivi o disattivi un elemento. Il lavoro è completato quando l’aggiornamento riprodotto provoca un render di rc-tree mantenendo il singolo render di CustomTreeNode indicato come corretto.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
TypeScript
Stelle
1.3k
Fork
491
Merge medio
48m
PR unite (30g)
1

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di react-component/tree

Tutte le issue di react-component/tree

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.