Práctica · Listas
key estable
El índice no es una identidad
Usar el índice del array como key le dice a React "el tercer elemento siempre es el mismo elemento". Cuando la lista se reordena, filtra o inserta, esa suposición falla y React reutiliza el DOM equivocado.
Por qué importa
React usa la key para emparejar nodos del render anterior con el nuevo. Con key={i} el nodo en posición 0 siempre se reutiliza para el item en posición 0, sin importar si es otro item. El resultado: estado local (inputs, animaciones, foco) queda atado al nodo equivocado.
La regla
Usa un identificador estable y único del dato: item.id, item.slug, o cualquier campo que no cambie cuando el array se transforma. El índice solo es seguro cuando la lista es completamente estática y nunca se reordena ni filtra.
Tropiezos comunes
- 01key={index} en listas dinámicas hace que el estado local (inputs, animaciones) quede en el nodo equivocado al reordenar.
- 02Si no tienes un id en tus datos, genéralo al crearlos — no en el render (cada render produciría una key nueva y React desmontaría el componente).
- 03La key solo es visible para React; no llega al componente hijo como prop.
¿Fue útil?
Inicia sesión para dar feedback