Porque adicionar uma key no loop de arrays em React

Neste artigo você vai aprender porque adicionar uma key no loop de arrays em React, e qual o motivo desta chave única

Fala programador(a), beleza? Bora aprender mais sobre arrays, loop, unique key e React!

Ao realizar um loop em um array ou array de objetos é comum receber o seguinte erro:

Each child in an array should have a unique "key" prop.

Isso acontece por que o React precisa de uma chave única, no atributo key de cada item do loop

Este recurso adiciona mais performance a aplicação, tornando o elemento único

Dando uma identidade a este elemento

O React não coloca as chaves automaticamente, o que parece ser muito simples a primeira vista, por uma questão de modelagem de dados

Ele não sabe como os nossos dados são modelados, se abstendo então desta responsabilidade

Qual a melhor maneira de declarar uma key única?

A melhor abordagem é que o elemento em si tenha um id único, que pode ser o id de cadastro no banco de dados

Exemplo:

<div>
    {items.map((item) => {
        return <p key={item.id}>{item.title}</p>;
    })}
</div>

Este é o cenário perfeito para o React

E se o item não tem um id único?

Acontece também! Então podemos colocar o índice do loop do método map

Veja um exemplo de item sem id:

<div>
    {items.map((item, index) => {
        return <p key={index}>{item}</p>;
    })}
</div>

Não é a abordagem mais aconselhável, mas resolve o problema também

O warning de key única é desativado

Conclusão

Neste artigo você aprendeu porque adicionar uma key no loop de arrays em React

É uma questão de performance, mas também faz parte da arquitetura da biblioteca

Precisamos adicionar a key única a cada item da repetição para também garantir o pleno funcionamento do React

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!