Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Multiple react re-renderings when updating tree data

Abierto
  • ¿Algo no está bien?
#798 2 comentarios 4 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
30/100
Tipo de issue
Error
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
react
Área
frontend, performance

Línea de trabajo

Comienza con la reproducción vinculada de CodeSandbox y su ejemplo en una ventana independiente; después, verifica los recuentos de renderizado mientras expandes el árbol y alternas un elemento. Se considera terminado cuando la actualización reproducida provoca un render de rc-tree y conserva el único render de CustomTreeNode indicado como correcto.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
1.3k
Forks
491
Merge medio
42 min
PR fusionados (30 d)
2

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de react-component/tree

Todos los issues de react-component/tree

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.