useTreeData mutations leave stale descendants under parents keyed by 0 or an empty string

Abierto
  • ¿Algo no está bien?
#10,907 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@raunakpandey1 ya está trabajando en esto.

Desde el 2/11/2026.

  • #10908 de @raunakpandey1 — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

The bug is in the ancestor loop of updateTree in the useTreeData hook, which uses while (node && node.parentKey) and stops at falsy keys such as 0 or ''. Read that loop and the reproduction steps, then run the hook test with a parent keyed 0 to see items diverge from getItem. Done means update, remove, insert and move keep items and getItem consistent for 0 and '' keys. A linked pull request (#10908) already exists, so check it before starting.

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

Descripción

Provide a general summary of the issue here

useTreeData does not propagate mutations through a parent whose key is numeric 0 or an empty string. The returned items tree can retain an old child even though getItem reflects the mutation.

🤔 Expected Behavior?

Updating, inserting, removing, or moving descendants should update the tree for all valid string and numeric keys, including 0 and ''. The nodes reachable through items and getItem should agree.

😯 Current Behavior

With a child under a parent keyed by 0:

  • update changes the lookup entry but leaves the old value in items.
  • remove deletes the lookup entry but leaves the child in items.
  • Appending a grandchild updates the lookup entry but not the tree.
  • Moving the child to the root leaves a stale copy under its original parent.

The same behavior occurs with '', including when the parent is nested under another root.

StackBlitz Reproduction

No hosted StackBlitz is attached. This was found by source inspection and reproduced using the repository's real hook with its existing Jest/renderHook setup. A minimal component is included below so it can also be tried in an app.

🖥️ Steps to Reproduce
import {useTreeData} from 'react-stately/useTreeData';

export default function Repro() {
  let tree = useTreeData({
    initialItems: [{id: 0, children: [{id: 'child', name: 'Before'}]}]
  });

  return (
    <>
      <button onClick={() => tree.update('child', {id: 'child', name: 'After'})}>
        Update child
      </button>
      <pre>items: {tree.items[0].children[0].value.name}</pre>
      <pre>getItem: {tree.getItem('child').value.name}</pre>
    </>
  );
}

Click Update child. Expected: both outputs are After. Actual: items stays Before, while getItem becomes After. Replace 0 with '' for the string-key case.

💁 Possible Solution

The ancestor loop in updateTree uses while (node && node.parentKey), which stops at valid falsy keys. I plan to use an explicit nullish check and add regression tests for update, remove, insert, and move, checking both tree contents and lookup consistency.

🔦 Context

Discovered while auditing the public tree-data mutation API for edge cases. Numeric zero is a valid application ID; a component rendering tree.items can show stale or duplicated data after these mutations. This report is based on a local reproduction, not a claim about a production incident.

Version

Reproduced from main at 83fb30648fe0a1c463256423553d6b3a4ee2ce82 (react-stately package version 3.51.0). React 19.3.0; Jest 30 with the repository's StrictMode hook test wrapper.

What browsers are you seeing the problem on?

Other

If other, please specify.

Reproduced in Jest/jsdom; browser verification has not yet been performed.

What operating system are you using?

macOS 27.2

🧢 Your Company/Team

Independent contribution.

🕷 Tracking Issue

None.

Lenguaje dominante
TypeScript
Estrellas
16k
Forks
1.6k
Merge medio
3 d 9 h
PR fusionados (30 d)
45

Preparar el entorno

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 adobe/react-spectrum

Todos los issues de adobe/react-spectrum

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.