key Keys de listas
Última atualização: 2026-11-03
key Keys de listas
Uma key é a identidade de um elemento dentro de uma lista renderizada. O React se apoia nela para reconhecer quais itens mudaram e quais devem ser movidos ou removidos; errar isso leva o estado ao lugar errado e valores digitados trocados. Uma key deve ser única e estável dentro da mesma lista. Escolher a key é uma decisão pequena com um efeito grande no comportamento da lista.
| Grupo | Renderização e Estado |
|---|---|
| Tipo | Padrão |
| Desde | Primeiras versões do React |
ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.
📝 Sintaxe
{items.map((item) => (
<li key={item.id}>{item.text}</li> // ✅ um id estável e único
))}
// ❌ key={index}: o estado muda de lugar quando a lista cresce, encolhe ou é reordenada⚙️ Parâmetros
| key | Um identificador estável e único para o elemento; o React o usa ao diferenciar listas para decidir qual elemento reaproveitar, mover ou destruir. |
|---|
Retorna：Sem valor de retorno — uma convenção de código e um modelo mental.
▶ Exemplo
O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.
Saída：
Cada linha da lista é um "nome da tarefa + caixa de texto". Digite em algumas linhas e clique em "insert at the top": a tarefa nova aparece no topo enquanto o texto digitado continua com a tarefa original — uma key estável permite ao React reconhecer cada item.💡 Pontos-chave
⚠️ Aviso Não use o índice como key quando a lista cresce, encolhe, é reordenada ou filtrada; o estado interno dos itens acaba migrando junto com as posições.
💡 Dica Prefira um id vindo do backend ou outro identificador de negócio estável; reserve o índice para listas puramente estáticas que não têm nenhum id estável.
ℹ️ Informação A key não é passada para dentro do componente: props.key é undefined dentro de um filho, então passe os dados que precisa como uma prop comum.
🏷️ Mais Renderização e Estado
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ Perguntas Frequentes
P Por que não posso usar o índice do array como key?
R O índice segue a posição, não o dado: depois de uma inserção, remoção ou reordenação, o React pode entregar o estado do item A ao item B, o que troca inputs e quebra checkboxes.
P As keys podem se repetir?
R Elas devem ser únicas dentro da mesma lista; duplicatas causam erros e avisos de renderização. Listas diferentes são independentes, então cada uma pode começar a numerar do 1.
P Como resolvo o aviso de missing key no console?
R Ele significa que os elementos devolvidos pelo map não têm key. Dê a cada item um identificador estável e único (um id de negócio é o ideal) e certifique-se de que ele fica no elemento mais externo do item da lista.
