Renderizar listas com .map() e key

De um array a uma lista de elementos

Quase qualquer interface real mostra coleções: uma lista de tarefas, os resultados de uma busca, os comentários de um post. No React não existe um laço especial dentro do JSX: você usa o método .map() dos arrays para transformar cada dado em um elemento JSX.

function ListaCompras() {
  const produtos = ["Pão", "Leite", "Ovos"];
  return (
    <ul>
      {produtos.map((produto) => (
        <li>{produto}</li>
      ))}
    </ul>
  );
}

.map() retorna um novo array, desta vez de elementos <li>, e o React sabe pintar um array de elementos um após o outro. Repare que o .map() fica entre chaves { }: é uma expressão JavaScript incorporada no JSX.

A prop key

Se você executar o código acima, o React mostrará um aviso no console:

Warning: Each child in a list should have a unique "key" prop.

Cada elemento de uma lista precisa de uma prop especial chamada key: um identificador único e estável dentro dessa lista.

<ul>
  {produtos.map((produto) => (
    <li key={produto}>{produto}</li>
  ))}
</ul>

Para que serve a key?

A key ajuda o React a identificar cada elemento entre renderizações. Quando a lista muda (um elemento é adicionado, removido ou reordenado), o React compara as keys para saber qual elemento é qual e atualizar apenas o necessário, em vez de recriar a lista inteira. Isso melhora o desempenho e evita bugs sutis (por exemplo, o texto de um <input> pulando para outra linha).

Uma boa key:

• É única entre os irmãos da mesma lista (não precisa ser única em toda a app).
• É estável: o mesmo dado deve sempre ter a mesma key. O ideal é um id que venha dos seus dados (tarefa.id, usuario.id...).

E o índice do .map()?

.map() oferece o índice como segundo argumento:

{produtos.map((produto, indice) => (
  <li key={indice}>{produto}</li>
))}

Usar o índice como key é tentador, mas é frágil: se a lista for reordenada, filtrada, ou elementos forem inseridos/removidos no meio, o índice de cada dado muda, e o React pode confundir as linhas. Só é aceitável quando a lista é estática (não muda de ordem nem de tamanho) e você não tem um id melhor.