¿Por qué React necesita una key en los elementos de una lista y qué se rompe de verdad si usas el índice del array?

Las keys le dicen a React qué elemento de la lista nueva corresponde a cuál de la lista vieja, para que pueda mover, conservar o eliminar nodos del DOM y su estado en lugar de emparejarlos solo por posición. Los índices del array solo funcionan en listas estáticas. Si los elementos se reordenan, se inserta uno al principio o se borra alguno, el índice de un elemento dado cambia, React reutiliza el nodo equivocado y el estado, como el valor de un input, acaba en la fila incorrecta.

Una key es la forma en que React responde a la pregunta: ¿es este el mismo elemento que vi en el render anterior? Sin ella empareja los hijos por posición, así que cuando una fila se mueve React cree que cambió el contenido y parchea el nodo existente en lugar de moverlo. Con una key estable sabe que el elemento se movió, conserva su nodo del DOM y su estado, y reordena. La trampa del índice es que el índice describe la posición, no el elemento. Me pasó en una tabla donde cada fila tenía un checkbox y un campo de notas. Borras la fila dos y todas las de abajo suben un índice, así que React empareja los nodos equivocados y acabas con las notas de otra persona en tu fila. Parece un bug de datos y es un bug de keys. Así que uso el id estable que venga con los datos, normalmente el id de la base de datos. Si de verdad no hay ninguno, genero un id cuando se crea el elemento y no durante el render, porque generarlo en el render te da una key nueva en cada pasada y remonta la lista entera.