Keys em Listas Dinâmicas
Key deve ser estável e única por item. Index como key corrompe estado em listas que mudam.
Definição
Keys são identificadores que o React usa no algoritmo de reconciliação para rastrear quais elementos da lista mudaram, foram adicionados ou removidos. Keys estáveis preservam estado dos componentes; keys voláteis fazem o React destruir e recriar.
Problema → Solução
Problema
index como key: remover item 0 faz todos os outros mudarem de key — React reutiliza componentes errados.Solução
Usar ID único e estável do item (id do banco de dados, UUID gerado uma vez, etc).Dica de entrevista
Tip
Key muda = React destrói e recria o componente do zero (perde state). Key estável = preserva state.Código
// ❌ Index como key — quebra
{items.map((item, i) => <Item key={i} {...item} />)}
// ✅ ID único
{items.map(item => <Item key={item.id} {...item} />)}Perguntas de entrevista
Q.Posso usar Math.random() como key?▾
A.Não. Cada render gera key diferente, fazendo o React destruir e recriar todos os componentes. Estado é perdido, animações reiniciam, performance é péssima. Use IDs estáveis.
Q.Quando index como key é OK?▾
A.Lista 100% estática (nunca reordena, adiciona ou remove), e os itens não têm estado interno (input, animação, etc). Em qualquer outro caso, prefira ID.
Q.Por que key é prop especial?▾
A.Não é passada para o componente filho — é usada apenas pelo React internamente. Por isso props.key dentro do componente é undefined. É um identificador no contexto do array.
13/122← →