¿Por qué React necesita una key estable en los elementos de una lista?
Opciones
- Para el estilo CSS de cada elemento de la lista
- Para que la reconciliation pueda emparejar elementos entre renders (Opción correcta)
- Las keys son opcionales; solo quitan una advertencia
- Para que el SEO indexe cada elemento de la lista
Respuesta
Para que la reconciliation pueda emparejar elementos entre renders; las keys inestables (como el índice en listas reordenables) causan estado incorrecto y remontajes extra
Por qué
Cuando una lista se vuelve a renderizar, React compara los elementos nuevos con los antiguos para actualizar solo lo que cambió. La key le dice a React qué elemento antiguo corresponde a cuál nuevo.
Si usas el índice del array como key y la lista se reordena o filtra, React empareja mal los elementos: el texto de un input o el estado de un checkbox puede saltar a otra fila.
Usa un ID estable y único de tus datos.
Recuerda
Keys de lista = IDs estables, no índices.