Cuando renderizas una lista, React necesita una manera de saber cuál elemento es cuál entre renders para poder reutilizar, reordenar, insertar o eliminar nodos del DOM correctamente. La key es esa identidad.
jsx
{users.( (
))}
Cuando renderizas una lista, React necesita una manera de saber cuál elemento es cuál entre renders para poder reutilizar, reordenar, insertar o eliminar nodos del DOM correctamente. La key es esa identidad.
{users.( (
))}
Usar el índice como key le dice a React "el elemento en la posición 0 es el mismo elemento que antes", lo cual se rompe en cuanto la lista se reordena, o insertas/eliminas desde el principio:
// items: [A, B, C] with keys 0,1,2
// you DELETE A → [B, C], keys become 0,1
// React thinks key 0 (was A) is now B, key 1 (was B) is now C...
// so it keeps the wrong DOM state with the wrong item.
Un síntoma real: una lista de inputs donde lo que escribes en una fila "salta" a otra tras eliminar/ordenar, porque React reutilizó el <input> equivocado (y su valor/foco internos).
user.id, un slug).Las keys son una pista para el algoritmo de reconciliación; acertar con ellas mantiene correctos tanto el rendimiento como el estado de los componentes.
Una biblioteca de preguntas de entrevista de IT con respuestas detalladas — de Junior a Senior.
Donar