Guia profundo sobre React Key

Em algum momento, tivemos o mesmo erro no console: Warning: Each child in an array or operator should have a unique "key" prop. Também criamos maneiras diferentes de resolver esse erro. No entanto, você sabe exatamente o que acontece se atribuirmos um valor, índice ou identificador aleatório? Existe uma diferença?

Como o key prop funciona?

Para descobrir as diferenças entre os vários valores possíveis como key prop, você precisa saber como o key prop funciona nos bastidores. Key é um prop que o React nos lembra de adicionar para identificar cada item em uma lista.

Portanto, esse valor deve ser único dos demais. O prop chave é de vital importância porque, segundo ele, o React deve executar o processo de re-renderização. Para fazer isso, segue um algoritmo simples para executá-lo:

1. Instantâneos do item (antes e depois) são criados.
2. Identifique os itens que já estavam na página para utilizá-los.
   
   - Caso tenham as mesmas chaves, não é necessário criá-las.
   - Se os itens não tiverem uma chave, o valor é atribuído de acordo com o índice. No entanto, o React lança um aviso no console se omitirmos a adição de chave (Warning: Each child in an array or operator should have a unique "key" prop).
3. Finalmente,
   
   - Itens que estavam em “antes” mas não são encontrados em “depois” (desmontar) são removidos.
   - São adicionados itens que não estavam em “antes” mas são mostrados em “depois” (montagem).
   - Os itens encontrados nas fases "antes" e "depois" (re-renderização) são atualizados.

O algoritmo nos ajuda a entender quando a re-renderização é executada. A próxima pergunta é sobre o valor que atribuímos a key-prop. Existem diferenças se atribuirmos um valor aleatório, índice e identificador.

Aleatório como key

Suponha que atribuímos valores aleatórios a uma lista de componentes como chaves. O que está acontecendo? De relance, funciona! No entanto, isso afeta o desempenho do nosso aplicativo.

Remover (unmount) e adicionar um componente (mount) tem um impacto no desempenho do nosso aplicativo. Valores aleatórios como chave são uma má ideia. Devemos evitá-los!

No código a seguir pode ser melhor visualizado. Entre no link onde são mostrados os tempos que os componentes são montados e desmontados.

Índices como key

É muito comum usarmos os índices do array como chave. Vamos ver os resultados que obtemos. Quando usamos o índice do nosso array resolvemos o problema de unmount e mount que tínhamos com valores aleatórios. Desta forma, não há erros de desempenho. Legal!

Identificadores como Key

Usar un identificador es una práctica común que debemos usar cuando sea posible. No necesitamos obtener el índice de nuestra array.

Em ambos os casos, índices e identificadores como chave, uma re-renderização é necessária. Existe alguma maneira de evitá-lo? Sim, com uma observação sobre nossos componentes. Portanto, evitaremos a re-renderização apenas se usarmos identificadores como chaves. Porque?

Usar memo em índices como key

Sabemos qual memorando executa a re-renderização apenas quando as props do componente mudam. Ao solicitar os componentes, os índices persistem em ambos os instantâneos. No entanto, as props não são mantidas com o índice de before snapshot.

Usar memo em identificadores como key

Ao contrário de usar os índices, o React não precisa renderizar novamente. A única coisa que varia nos snapshots (antes e depois) é a ordem dos componentes.

Agora, se os componentes tiverem um estado, um comportamento estranho acontece.

Componentes com um estado

No exemplo a seguir, cada um dos componentes muda de cor quando clicado. Isso requer um estado (useState).

Vamos clicar no segundo item e depois no botão de classificação. Acontece o seguinte:

1. Os instantâneos “antes” e “depois” são criados.
2. Verificação da existência da chave e recuperação das respectivas instâncias. Observe que ao recuperar as instâncias, a chave e o estado do componente são associados.
   
   - ID como chave: Recupera a instância com base na chave (em ambos os instantâneos existem as mesmas chaves).
   
   - Index as Key: Recupera a instância com base na chave (em ambos os snapshots existem as mesmas chaves).
   
   - Aleatório como key: as chaves são diferentes em ambos os instantâneos.
   
3. Mount, unmount e re-render
   
   - ID como key: na instância com chave 2 (segundo item) o estado persiste e o re-render é executado. No entanto, usar o memo não executará a nova renderização.
   
   - Index como key: a instância com chave 1 (segundo item) é associada ao estado e o segundo item sempre permanecerá selecionado. Desta vez, a re-renderização é executada porque nossa chave é baseada no índice do array e os props foram alterados.
   
   - Aleatório como key: as chaves não existem no instantâneo posterior. Então eles são removidos (unmount) e novos adicionados (mount).

Finalmente

1) Não é uma boa prática atribuir valores aleatórios como Key.

2) O uso do hook memo em nossos itens corrigirá a re-renderização e melhorará o desempenho de nosso componente.

3) Usar o ID do registro em listas dinâmicas (adicionar, filtrar ou reordenar) evitará erros e re-renders.

4) Podemos usar index como key caso não precisemos executar uma operação (filtrar, adicionar, reordenar) na lista ou os itens não tenham um status. Exemplo de caso: paginação.

Espero que esta lista tenha sido útil para você. Vejo você em breve!