{"id":3540,"date":"2021-07-24T08:53:39","date_gmt":"2021-07-24T08:53:39","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/react-keys-yes-you-need-them-but-why-exactly\/"},"modified":"2026-04-24T11:30:22","modified_gmt":"2026-04-24T11:30:22","slug":"chaves-de-reacao-sim-precisa-delas-mas-porque-exatamente","status":"publish","type":"post","link":"https:\/\/thecodest.co\/pt\/blog\/react-keys-yes-you-need-them-but-why-exactly\/","title":{"rendered":"Chaves React, sim! Precisa delas, mas porqu\u00ea exatamente?"},"content":{"rendered":"

H\u00e1 ainda mais uma coisa que deve ter em conta: o React<\/a> Chave<\/strong> cada elemento da lista renderizada deve ter esse atributo. Este conceito \u00e9 uma das primeiras coisas que todo front-end criador<\/a> aprende sobre React<\/strong> no in\u00edcio da sua viagem. Agora, vamos aprofundar um pouco mais para explorar por que \u00e9 que isto acontece e quando \u00e9 que podemos tomar alguns atalhos.<\/p>\n

Porque \u00e9 que precisamos deste atributo-chave?<\/h2>\n

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

    \n
  1. Dois tipos diferentes de elementos nunca ser\u00e3o iguais - por isso, volte a renderiz\u00e1-los.<\/li>\n
  2. Os programadores podem ajudar manualmente a otimizar esse processo atrav\u00e9s de atributos-chave, para que os elementos, mesmo que a sua ordem tenha mudado, possam ser localizados e comparados mais rapidamente.<\/li>\n<\/ol>\n

    Com base nisso, podemos concluir que cada Chave React<\/strong> tamb\u00e9m devem ser \u00fanicos (dentro da lista de elementos, n\u00e3o globalmente) e est\u00e1veis (n\u00e3o devem mudar). Mas o que \u00e9 que pode acontecer quando n\u00e3o s\u00e3o assim?<\/p>\n

    Singularidade, estabilidade e \u00edndice de matriz<\/h2>\n

    Como j\u00e1 referimos anteriormente, Teclas React<\/strong> deve ser est\u00e1vel e \u00fanico. A maneira mais f\u00e1cil de conseguir isso \u00e9 usar um ID exclusivo (por exemplo, de um banco de dados) e pass\u00e1-lo para cada elemento ao mapear um array, f\u00e1cil. Mas e em situa\u00e7\u00f5es em que n\u00e3o temos um ID, um nome ou outros identificadores \u00fanicos para passar para cada elemento? Bem, se n\u00e3o passarmos nada como chave, React<\/strong> tomar\u00e1 o \u00edndice do array atual por defeito (uma vez que \u00e9 \u00fanico dentro dessa lista) para o tratar para n\u00f3s<\/a>mas tamb\u00e9m nos dar\u00e1 uma boa mensagem de erro na consola:<\/p>\n

    \"\"<\/p>\n

    Porque \u00e9 que isso acontece? A resposta \u00e9 que o \u00edndice da matriz n\u00e3o \u00e9 est\u00e1vel. Se a ordem dos elementos mudar, cada uma das chaves mudar\u00e1 e teremos um problema. Se React<\/strong> encontra uma situa\u00e7\u00e3o em que a ordem de uma lista de elementos foi alterada, ele ainda tentar\u00e1 compar\u00e1-los pelas chaves, o que significa que cada compara\u00e7\u00e3o terminar\u00e1 na reconstru\u00e7\u00e3o de um componente e, como resultado, toda a lista ser\u00e1 reconstru\u00edda a partir do zero. Al\u00e9m disso, podemos encontrar alguns problemas inesperados, como actualiza\u00e7\u00f5es do estado do componente para elementos como entradas n\u00e3o controladas e outros problemas m\u00e1gicos dif\u00edceis de depurar.<\/p>\n

    Excep\u00e7\u00f5es<\/h2>\n

    Voltemos ao \u00edndice da matriz. Se o usarmos como um Chave React<\/strong> pode ser t\u00e3o problem\u00e1tico, porqu\u00ea React<\/strong> ir\u00e1 utiliz\u00e1-lo por defeito? Existe algum caso de uso em que n\u00e3o h\u00e1 problema em fazer isso? A resposta \u00e9 sim, o caso de uso para isso s\u00e3o as listas est\u00e1ticas. Se tiver a certeza que a lista que est\u00e1 a renderizar nunca mudar\u00e1 de ordem, \u00e9 seguro usar o \u00edndice do array, mas lembre-se, se tiver identificadores \u00fanicos, \u00e9 melhor us\u00e1-los. Voc\u00ea tamb\u00e9m pode notar que passar \u00edndices como chaves far\u00e1 com que o React<\/strong> 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\u00e7\u00e3o expl\u00edcita de \u00edndices como chaves ser considerada uma m\u00e1 pr\u00e1tica e alguns linters poderem trat\u00e1-la como um erro, enquanto React<\/strong> considera que se trata de uma situa\u00e7\u00e3o em que \"os programadores sabem o que est\u00e3o a fazer\" - por isso, n\u00e3o o fa\u00e7a a menos que saiba realmente o que est\u00e1 a fazer. Alguns exemplos de quando n\u00e3o h\u00e1 problema em utilizar essa exce\u00e7\u00e3o seriam um menu pendente com uma lista est\u00e1tica de bot\u00f5es ou a apresenta\u00e7\u00e3o de uma lista de elementos com a informa\u00e7\u00e3o do endere\u00e7o da sua empresa.<\/p>\n

    Uma alternativa a uma chave baseada num conjunto de dados<\/h2>\n

    Digamos que nenhuma das op\u00e7\u00f5es anteriores \u00e9 adequada para n\u00f3s. Por exemplo, temos de apresentar uma lista de elementos com base num conjunto de cadeias de caracteres que pode ser duplicado, mas que tamb\u00e9m pode ser reordenado. Neste caso, n\u00e3o podemos utilizar nenhuma das cadeias de caracteres porque n\u00e3o s\u00e3o \u00fanicas (o que tamb\u00e9m pode causar alguns erros m\u00e1gicos) e o \u00edndice do conjunto n\u00e3o \u00e9 suficientemente bom porque vamos alterar a ordem dos elementos. A \u00faltima coisa em que podemos confiar em situa\u00e7\u00f5es como esta \u00e9 a utiliza\u00e7\u00e3o de alguns identificadores externos. Lembre-se, ele tem que ser est\u00e1vel, ent\u00e3o n\u00e3o podemos simplesmente usar Math.random(). Existem alguns pacotes NPM que podemos usar nesses casos, por exemplo o \"uuid\"<\/a> pacote. Ferramentas como esta podem ajudar-nos a manter as chaves da nossa lista est\u00e1veis e \u00fanicas, mesmo quando n\u00e3o conseguimos encontrar identificadores adequados no nosso dados<\/a> conjunto. Devemos considerar a utiliza\u00e7\u00e3o do ID da base de dados e do \u00edndice da matriz (se poss\u00edvel) em primeiro lugar, para minimizar o n\u00famero de pacotes utilizados pelo nosso projeto<\/a>.<\/p>\n

    Para terminar<\/h2>\n