🎨🗝️ A importância da key prop para renderização de listas no React.

⚠️ Por que esse Warning merece uma atenção especial

Se você estuda/trabalha com React, provavelmente já abriu o console do seu navegador e se deparou com a seguinte mensagem:

Isso é um Warning, um aviso, dizendo que o seu código funciona e foi executado, porém que há maneiras melhores de escreve-lo, de forma a evitar problemas futuros.

📝Renderizando listas no React

No início do aprendizado em React, uma das primeiras coisas que aprendemos é como renderizar uma lista em JSX no React, com base em valores armazenados em um array, por exemplo. Entendemos que para isso, o forEach não é recomendado, já que ele não retorna os valores (ele apenas aplica uma determinada função em cada um dos itens), e que para tal fim, o método map é mais recomendado, pois ele também executa uma função para cada item, porém sempre retorna um array com os valores modificados ou não (de acordo com a função), e contendo a mesma quantidade de itens.

Exemplo de renderização de uma lista de posts.

const tabNewsPosts = ["post1", "post2", "post3", "post4"]

return (
    <ul>
      {tabNewsPosts.map((post) => {
          return <li>{post}</li>
      })}
    </ul>
)

Analisando o exemplo a cima, podemos ver que cada string em tabNewsPosts será renderizado dentro de uma li, ou seja, neste momento nossa lista possui 4 itens. Ao rodar esse código, o console do navegador exibirá o Warning que citamos no início deste post, ou seja, nossa lista será exibida, mas ela pode ser melhorada.

Entendendo o Warning

Vamos ler o que o Warning está dizendo:

⚠️Cada elemento filho de uma lista deveria possuir uma propriedade key com valor único.

Beleza então, já que estou usando o map, posso pegar o índice (que é recebido como segundo argumento de um map), e passar como valor para essa tal propriedade key.

Exemplo:

...
return (
    <ul>
      {tabNewsPosts.map((post, index) => {
          return <li key={index}>{post}</li>
      })}
    </ul>
)

🚩 Dois problemas ao se fazer isso:

1. Você "resolveu" um Warning sem tentar entender porque ele existe, quais problemas ele pode causar.
2. Não é recomendado enviar o índice do array como valor da key prop. Tanto é que se você não passar essa propriedade, o React por padrão já vai fazer isso, mas ele te da um Warning dizendo que não é recomendado. Iremos entender o motivo do porque não é bom utilizar o índice adiante.

Esse Warning, é uma forma do React te dizer:

Eae Dev, tudo bem ? Então, deixa eu te falar, eu vi que você está renderizando uma lista aqui, mas ta difícil para mim viu. Quando você precisar alterar a lista (alterar um valor, adicionar ou remover um item), eu não vou conseguir identificar em qual item você fez isso e vou ter que analisar um por um, e isso pode causar um gap de performance na sua aplicação, dependendo da quantidade de itens e alterações. Me ajuda ai, coloca uma propriedade única para cada um dos itens, para eu saber exatamente qual foi modificado, e atuar apenas em cima dele. Valeu, abraços.

No nosso exemplo, temos apenas 4 itens na lista, mas sabemos que este número pode ser muito grande, então a key prop é uma forma do React identificar unicamente cada item de uma lista, de modo que cada alteração realizada, ele consegue determinar precisamente qual mudança precisa ser feita, sem comprometer a performance da aplicação.

Entendi, mas por que não posso usar o índice do array como key prop, já que cada item da lista possui o seu ?

É uma boa pergunta, mas se você analisar com calma, vai perceber o problema.

Se tivessemos uma lista estática sendo renderizada, ou seja, uma lista que nunca sofrerá modificações, até que não seria uma má idéia utilizar o índice como key prop. Porém estes casos são raros, e o problema começa da seguinte forma:

Levando em conta que estou utilizando o índice como key prop: Imagine aquela nossa lista de posts.

• o "post1" terá índice 0 e key 0
• o "post2" terá índice 1 e key 1
• e assim por diante...
  Um usuário cria um novo post. Na página de Relevantes aqui do TabNews, esse post será o primeiro da lista (até outro usuário fazer o mesmo). Já que ele será o primeiro, então ele estará no índice 0 no array. Aqui que a coisa fica complicada. Ali em cima, eu disse que o post1 tem índice 0 e key 0, porém agora há um novo ítem no índice 0, qual key ele vai receber ? Isso mesmo - O índice ZERO. E nessa hora, o React fica muito maluco, pois como houve uma inserção no Array, ele verifica o item de key 0, mas agora existe um outro também com key 0, e ele não sabe mais quem é quem. E é por isso que você não deve utilizar o índice do array como key prop.

Beleza, mas então o que eu utilizo.

Algo que seja ÚNICO, que geralmente será um id gerado automaticamente por alguma biblioteca, por exemplo. Ou dependendo do caso, algo que identifique únicamente o item, por exemplo, em uma lista de usuários, o CPF de cada (que também não seria interessante armazenar no client-side, mas é só um exemplo).

Se você chegou até aqui, meus parabéns guerreiro, eu sei que não foi fácil, e me desculpa pelo textão.

Fique a vontade para deixar sua opinião/comentário/crítica/sugestão. Abraços.