¿Por qué los elementos de una lista necesitan una key, y por qué no usar el índice?

Question

Accepted Answer

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.map(user => ( // stable, unique id ))} ``` ## Por qué el índice del array es arriesgado 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: ```jsx // 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 `` equivocado (y su valor/foco internos). ## Reglas - Usa un id **estable y único** de tus datos (`user.id`, un slug). - El índice es aceptable **solo** para una lista estática que nunca se reordena, inserta o elimina. - Las keys deben ser únicas entre **hermanos** (no globalmente). 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.