Por que o React precisa de uma key nos itens de lista, e o que quebra de fato se você usar o índice do array?

As keys dizem ao React qual elemento da lista nova corresponde a qual da lista antiga, para que ele possa mover, manter ou remover nós do DOM e o estado deles em vez de casar apenas pela posição. Índices de array só funcionam para listas estáticas. Se os itens forem reordenados, inseridos no começo ou removidos, o índice de um item muda, o React reaproveita o nó errado, e estado como o valor de um input vai parar na linha errada.

Uma key é como o React responde à pergunta: esse é o mesmo item que eu vi no render passado. Sem ela, ele pareia os filhos por posição, então quando uma linha se move o React acha que o conteúdo mudou e aplica patch no nó existente em vez de movê-lo. Com uma key estável ele sabe que o item se moveu, mantém o nó do DOM e o estado dele, e reordena. A armadilha do índice é que o índice descreve a posição, não o item. Eu peguei isso numa tabela onde cada linha tinha um checkbox e um campo de notas. Apague a linha dois e todas as linhas abaixo sobem um índice, então o React pareia os nós errados e você acaba com as notas de outra pessoa na sua linha. Parece bug de dados e é bug de key. Então eu uso qualquer id estável que venha com os dados, normalmente o id do banco. Se realmente não existir um, eu gero um id quando o item é criado, e não durante o render, porque gerar no render te dá uma key nova a cada passada e remonta a lista inteira.