Chaves React, sim! Precisa delas, mas porquê exatamente?

Há ainda mais uma coisa que deve ter em conta: o React Chave cada elemento da lista renderizada deve ter esse atributo. Esse conceito é uma das primeiras coisas que todo desenvolvedor front-end aprende sobre React no início da sua viagem. Agora, vamos aprofundar um pouco mais para explorar por que é que isto acontece e quando é que podemos tomar alguns atalhos.

Porque é que precisamos deste atributo-chave?

A resposta mais simples seria "para otimizar as rendições", mas a mais completa tem de mencionar, pelo menos, o conceito de React Reconciliação. Este é o processo de descobrir como atualizar a IU da forma mais eficiente. Para fazer isso rapidamente, React tem de decidir que partes da árvore de elementos precisam de ser actualizadas e quais não precisam. O problema é que pode haver muitos elementos no DOM e comparar cada um deles para decidir qual deve ser atualizado é bastante dispendioso. Para otimizar isto, React implementa o algoritmo diffing que se baseia em dois pressupostos:

1. Dois tipos diferentes de elementos nunca serão iguais - por isso, volte a renderizá-los.
2. Os programadores podem ajudar manualmente a otimizar esse processo através de atributos-chave, para que os elementos, mesmo que a sua ordem tenha mudado, possam ser localizados e comparados mais rapidamente.

Com base nisso, podemos concluir que cada Chave React também devem ser únicos (dentro da lista de elementos, não globalmente) e estáveis (não devem mudar). Mas o que é que pode acontecer quando não são assim?

Singularidade, estabilidade e índice de matriz

Como já referimos anteriormente, Teclas React deve ser estável e único. A maneira mais fácil de conseguir isso é usar um ID exclusivo (por exemplo, de um banco de dados) e passá-lo para cada elemento ao mapear um array, fácil. Mas e em situações em que não temos um ID, um nome ou outros identificadores únicos para passar para cada elemento? Bem, se não passarmos nada como chave, React tomará o índice do array atual por defeito (uma vez que é único dentro dessa lista) para o tratar para nósmas também nos dará uma boa mensagem de erro na consola:

Porque é que isso acontece? A resposta é que o índice da matriz não é estável. Se a ordem dos elementos mudar, cada uma das chaves mudará e teremos um problema. Se React encontra uma situação em que a ordem de uma lista de elementos foi alterada, ele ainda tentará compará-los pelas chaves, o que significa que cada comparação terminará na reconstrução de um componente e, como resultado, toda a lista será reconstruída a partir do zero. Além disso, podemos encontrar alguns problemas inesperados, como actualizações do estado do componente para elementos como entradas não controladas e outros problemas mágicos difíceis de depurar.

Excepções

Voltemos ao índice da matriz. Se o usarmos como um Chave React pode ser tão problemático, porquê React irá utilizá-lo por defeito? Existe algum caso de uso em que não há problema em fazer isso? A resposta é sim, o caso de uso para isso são as listas estáticas. Se tiver a certeza que a lista que está a renderizar nunca mudará de ordem, é seguro usar o índice do array, mas lembre-se, se tiver identificadores únicos, é melhor usá-los. Você também pode notar que passar índices como chaves fará com que o React a mensagem de erro desaparece, ao mesmo tempo que faz com que alguns dos linters externos apresentem um erro ou aviso. Isto deve-se ao facto de a utilização explícita de índices como chaves ser considerada uma má prática e alguns linters poderem tratá-la como um erro, enquanto React considera que se trata de uma situação em que "os programadores sabem o que estão a fazer" - por isso, não o faça a menos que saiba realmente o que está a fazer. Alguns exemplos de quando não há problema em utilizar essa exceção seriam um menu pendente com uma lista estática de botões ou a apresentação de uma lista de elementos com a informação do endereço da sua empresa.

Uma alternativa a uma chave baseada num conjunto de dados

Digamos que nenhuma das opções anteriores é adequada para nós. Por exemplo, temos de apresentar uma lista de elementos com base num conjunto de cadeias de caracteres que pode ser duplicado, mas que também pode ser reordenado. Neste caso, não podemos utilizar nenhuma das cadeias de caracteres porque não são únicas (o que também pode causar alguns erros mágicos) e o índice do conjunto não é suficientemente bom porque vamos alterar a ordem dos elementos. A última coisa em que podemos confiar em situações como esta é a utilização de alguns identificadores externos. Lembre-se, ele tem que ser estável, então não podemos simplesmente usar Math.random(). Existem alguns pacotes NPM que podemos usar nesses casos, por exemplo o "uuid" pacote. Ferramentas como esta podem ajudar-nos a manter as chaves da nossa lista estáveis e únicas, mesmo quando não conseguimos encontrar identificadores adequados no nosso conjunto de dados. Devemos considerar usar o ID do banco de dados e o índice do array (se possível) primeiro, para minimizar o número de pacotes usados pelo nosso projeto.

Para terminar

• Cada elemento da lista de React devem ter um atributo-chave único e estável,
• Teclas React são utilizados para acelerar o Processo de reconciliação e evitar a reconstrução desnecessária de elementos nas listas,
• A melhor fonte para as chaves é a ID única da entrada de dados (por exemplo, a partir da base de dados),
• Pode utilizar o índice da matriz como chave, mas apenas para uma lista estática cuja ordem não será alterada,
• Se não houver outra forma de obter chaves estáveis e únicas, considere a utilização de alguns fornecedores de ID externos, por exemplo, o pacote "uuid".

Ler mais:

Porque é que deve (provavelmente) utilizar Typescript

Como não matar um projeto com más práticas de codificação?

Estratégias de obtenção de dados no NextJS