Neste artigo você vai compreender como funciona a prop key no React, entendendo a fundo o porque de utilizar key em um loop de componentes
Fala programador(a), beleza? Bora aprender mais sobre React!
O React é uma biblioteca JavaScript eficiente e flexível para criar interfaces de usuário.
Ele permite que você crie componentes reutilizáveis e complexos com facilidade.
Um aspecto importante do React é a propriedade ‘key’, que desempenha um papel vital quando se trata de listas e desempenho.
Neste artigo, vamos explorar em profundidade o conceito da propriedade ‘key’ no React JS.
Por Que Precisamos da Propriedade Key?
As chaves são importantes em React para ajudar a identificar quais itens foram alterados, adicionados ou removidos.
Mais especificamente, cada chave deve ser única entre os irmãos. Isso significa que eles precisam ser únicos em relação a todos os outros elementos ao mesmo nível no DOM.
Em muitos casos, você pode usar IDs de seu data como chaves, mas quando não há IDs estáveis disponíveis, você pode usar a abordagem do índice como último recurso.
Contudo, isso não é recomendado se a ordem dos itens puder mudar. Isso pode impactar negativamente o desempenho e pode causar problemas com o estado do componente.
const numeros = [1, 2, 3, 4, 5];
// Renderização de lista no React
const listaNumeros = numeros.map((numero, index) =>
<li key={index}>{numero}</li>
);
Como o React Usa as Chaves
O React usa a propriedade ‘key’ para rastrear cada elemento do DOM. Quando o estado de um componente muda, o React precisa decidir quais partes do DOM devem ser atualizadas.
O React então compara o novo conjunto de elementos com o antigo para decidir quais elementos atualizar.
Esse processo é conhecido como reconciliação, e é aqui que a propriedade ‘key’ entra em jogo.
O React usa a propriedade ‘key’ para corresponder aos elementos filhos antes e depois da renderização.
Cuidados com a Propriedade Key
Embora a propriedade ‘key’ seja muito útil, há algumas coisas importantes a considerar ao usá-la:
- As chaves devem ser únicas entre os irmãos. No entanto, eles não precisam ser globalmente únicos.
- As chaves são usadas pelo React para identificar quais itens foram alterados, adicionados ou removidos. Portanto, eles devem ser atribuídos aos elementos dentro do array para dar uma identidade estável.
- Evite usar índices para chaves se a ordem dos itens puder mudar. Isso pode impactar negativamente o desempenho e causar problemas com o estado do componente.
Casos de Uso da Propriedade Key
No React, a propriedade ‘key’ é frequentemente usada quando se trabalha com listas de elementos.
Por exemplo, suponha que você tenha uma lista de nomes que deseja renderizar como uma lista não ordenada.
Aqui está como você faria isso:
const names = ['Alice', 'Bob', 'Charlie'];
function NameList() {
return (
<ul>
{names.map((name, index) =>
<li key={index}>{name}</li>
)}
</ul>
);
}
Neste exemplo, usamos a propriedade ‘key’ para atribuir um identificador único a cada elemento <li>.
Isto é fundamental para o algoritmo de reconciliação do React, que usa essas chaves para determinar quais itens foram alterados, adicionados ou removidos.
Key e Componentes
É importante entender que a propriedade ‘key’ não é passada para o componente. Em outras palavras, se você tem um componente como este:
function MyComponent(props) {
return <div>{props.key}</div>;
}
E você tenta renderizar <MyComponent key="unique" />, você não será capaz de acessar props.key dentro de MyComponent.
A propriedade ‘key’ não faz parte do objeto de props; ela é usada pelo React para rastrear a identidade de cada componente.
Key e Desempenho
A propriedade ‘key’ desempenha um papel crítico no desempenho dos aplicativos React.
O algoritmo de reconciliação do React usa a propriedade ‘key’ para identificar quais componentes precisam ser atualizados.
Se você não fornecer uma chave ou fornecer chaves que mudam frequentemente, o React terá que re-renderizar mais componentes do que o necessário, resultando em uma piora do desempenho.
Por exemplo, considere a seguinte renderização de uma lista:
const items = getItems(); // Fetch some list of items
return items.map((item, index) => <ListItem key={index} item={item} />);
Neste caso, estamos usando o índice do item como chave. No entanto, se a lista de itens mudar (por exemplo, um item for adicionado ou removido), todos os índices mudarão, forçando o React a re-renderizar todos os componentes ListItem, mesmo que a maioria deles não tenha mudado.
Portanto, é geralmente uma boa prática usar identificadores estáveis como chaves sempre que possível.
Espero que essas seções adicionais forneçam uma compreensão mais clara do papel crucial que a propriedade ‘key’ desempenha na criação de aplicativos eficientes com React JS.
A chave é, sem dúvida, uma pequena propriedade com um grande impacto!
Quer aprender mais sobre React JS? Confira o vídeo abaixo:
Conclusão
Chegamos ao fim do artigo sobre a explicação de como funciona a prop key no React!
Entender a propriedade ‘key’ é vital para qualquer desenvolvedor que trabalhe com o React JS. Esta propriedade não é apenas essencial para o desempenho, mas também permite que o React identifique e reutilize elementos do DOM existentes.
Ao entender como a propriedade ‘key’ funciona, você será capaz de criar aplicações mais eficientes e evitar erros comuns que podem prejudicar o desempenho. Então, da próxima vez que você encontrar-se trabalhando com listas no React, lembre-se de dar a devida atenção à propriedade ‘key’.
Está buscando em evoluir como Programador? Confira o nossos cursos de programação.