Reconciliação e o papel da prop `key` em listas
Pergunta
Como o React decide o que atualizar no DOM ao re-renderizar uma lista, e por que usar o índice do array como `key` causa bugs?
Resposta esperada
No re-render, o React compara a nova árvore de elementos com a anterior. Pra listas, ele usa a `key` de cada item pra parear 'esse elemento novo é a continuação de qual elemento antigo?'. Com uma `key` estável e única por item (o id do dado), mover/inserir/remover um item preserva o estado e o DOM dos outros. Com `key={index}`, a key de um item muda quando a lista é reordenada ou um item é removido do meio: o React acha que o item na posição 2 continua sendo 'o item 2', reaproveita o DOM/estado errado, e você vê inputs com valor trocado, checkbox marcado no item errado, animação piscando. Índice como key só é seguro se a lista nunca reordena, nunca tem inserção/remoção no meio, e os itens não têm estado próprio.
Por que perguntam isso
Pergunta pleno de React. O bug do índice como key é clássico. Sinal bom: nomear os sintomas concretos (estado no item errado) e as condições em que índice é aceitável.