Por que os itens de lista precisam de uma chave, e por que não usar o índice?

Question

Accepted Answer

Quando você renderiza uma lista, React precisa de uma maneira de saber **qual item é qual** entre renderizações, para que possa reutilizar, reordenar, inserir ou excluir nós DOM corretamente. A **`key`** é essa identidade. ```jsx {users.map(user => ( // stable, unique id ))} ``` ## Por que o índice da matriz é arriscado Usar o índice como chave diz ao React "o item na posição 0 é o mesmo item de antes" — o que quebra assim que a lista se reordena, ou você insere/remove da frente: ```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. ``` Um sintoma real: uma lista de inputs onde digitar em uma linha "salta" para outra após deletar/ordenar, porque React reutilizou o `` errado (e seu valor/foco interno). ## Por que isso importa - Use um id **estável e único** de seus dados (`user.id`, um slug). - O índice é aceitável **apenas** para uma lista estática que nunca reordena, insere ou deleta. - As chaves devem ser únicas entre **irmãos** (não globalmente). As chaves são uma dica para o algoritmo de reconciliação; acertá-las mantém o desempenho e o estado do componente corretos.