Por que você precisa da prop key no React
Você vê este aviso no seu console: "Each child in a list should have a unique 'key' prop."
Muitos desenvolvedores o ignoram. Isso é um erro. A prop key não é apenas um aviso. É uma ferramenta para performance e prevenção de bugs.
O que a prop key faz? O React usa a key para identificar os itens da lista. Ela informa ao React qual item mudou, foi movido ou foi removido.
Sem uma key, o React precisa renderizar novamente a lista inteira. Isso torna seu app mais lento e causa bugs de dados.
O Exemplo da Biblioteca Imagine uma biblioteca com 1.000 livros. Se você adicionar um novo livro no meio, terá que mover todos os outros livros para abrir espaço.
No React, a key atua como um ID único. Ela dá a cada elemento uma identidade. Durante o processo de reconciliação, o React compara a nova lista com a antiga.
O Problema da Ausência de Keys Se você pular a key, o React pensará que todos os itens são iguais. Se você adicionar um item no início, o React pensará que a lista inteira mudou. Ele recria cada elemento no DOM. Isso desperdiça memória e CPU.
A Armadilha do Index
Desenvolvedores iniciantes frequentemente usam o índice do array como key.
Exemplo: key={index}
Isso é perigoso para listas dinâmicas. Se você ordenar, filtrar ou excluir itens, o índice muda. Isso leva a estados de UI incorretos e bugs.
Melhores Práticas para Keys
- Use IDs estáveis do seu banco de dados (como
user.id). - Certifique-se de que as keys sejam únicas entre elementos irmãos.
- Evite usar
Math.random()como key. Ele muda a cada renderização e causa oscilações (flickering) na UI. - Se seus dados não tiverem um ID, gere um usando
uuidounanoidao buscar os dados.
Guia de Seleção de Keys
• ID do Banco de Dados: O melhor. Altamente estável e rápido.
• Índice do Array: Use apenas para listas estáticas que nunca mudam.
• Math.random(): Evite. Ele força remontagens desnecessárias.
Resumo Uma boa key torna seu app mais rápido. Ela pode economizar até 40% de renderizações desnecessárias. Sempre priorize identificadores estáveis e únicos.