Domine Listas e Keys no React
Renderizar listas no React é simples, mas fazer isso da maneira correta é difícil.
Muitos desenvolvedores usam o índice do array como uma key. Isso é um erro. Isso leva a bugs e performance lenta.
Veja como você deve lidar com dados dinâmicos no React.
Como o React utiliza listas O React utiliza o método map() para transformar arrays em elementos de UI. Quando você usa o map(), o React transforma cada pedaço de dado em um componente.
O Papel das Keys O React utiliza um Virtual DOM. Quando os dados mudam, o React compara os novos dados com os antigos. Esse processo é chamado de reconciliação.
As keys atuam como identificadores únicos. Elas dizem ao React exatamente qual item mudou, moveu-se ou foi excluído.
Por que usar o índice como uma key é perigoso Usar o índice (0, 1, 2...) como uma key causa três problemas principais:
- Erros de Estado do Componente: Se você ordenar uma lista, campos de entrada ou checkboxes podem exibir dados do item errado.
- Quedas de Performance: O React não consegue rastrear qual item é qual. Frequentemente, ele renderiza novamente a lista inteira em vez de apenas um item.
- Bugs Visuais: Sua UI pode parecer correta, mas a lógica interna falhará quando os itens mudarem de posição.
A Maneira Correta de Usar Keys Para manter seu app rápido e estável, siga estas regras:
- Use IDs Únicos: Sempre use IDs do seu banco de dados (como um UUID ou uma chave primária).
- Nunca Use Math.random(): Gerar keys durante a renderização faz com que o React recrie cada elemento em cada atualização. Isso acaba com a performance.
- Mantenha as Keys Estáveis: Uma key deve permanecer a mesma para o mesmo dado durante todo o seu ciclo de vida.
Comparação Rápida
Recurso: Estabilidade Usando Índice: Instável Usando ID Único: Altamente Estável
Recurso: Performance Usando Índice: Ruim Usando ID Único: Otimizada
Recurso: Segurança de Estado Usando Índice: Inseguro Usando ID Único: 100% Seguro
Resumo para Desenvolvedores Use o método map(). Passe um ID único e estável para a prop key. Evite usar o índice do array para qualquer lista que possa ser alterada, ordenada ou filtrada.