Neste artigo você aprenderá a maneira correta de mudar estado de array em React JS, utilizando o hook useState
Fala programador(a), beleza? Bora aprender mais sobre React JS!
Gerenciar o estado em React JS é uma tarefa crucial que todo desenvolvedor enfrenta.
Quando o estado envolve arrays, existem práticas recomendadas para garantir que as atualizações sejam feitas de maneira imutável e otimizada.
Neste artigo, abordaremos a maneira correta de mudar o estado de arrays no React.
A importância da Imutabilidade
Em React, é essencial que as atualizações de estado sejam feitas de forma imutável. Isso significa que, ao invés de modificar diretamente o estado existente, criamos uma cópia e fazemos as alterações nesta nova versão.
Isso ajuda o React a realizar otimizações, garantindo que as renderizações sejam eficientes.
Atualizando um Array
Ao lidar com arrays em React, seguir práticas imutáveis é fundamental. Vamos ver alguns cenários comuns e como tratá-los corretamente:
Adicionando um item ao array
Quando desejamos adicionar um item a um array, podemos usar o spread operator para isso:
import React, { useState } from 'react';
function Lista() {
const [itens, setItens] = useState([]);
const adicionarItem = (item) => {
setItens(itensAnteriores => [...itensAnteriores, item]);
};
return (
// Renderização do componente...
);
}
Removendo um item do array
Para remover um item, podemos utilizar o método filter:
const removerItem = (id) => {
setItens(itensAnteriores => itensAnteriores.filter(item => item.id !== id));
};
Atualizando um item no array
Ao atualizar um item específico, podemos combinar map com uma condição:
const atualizarItem = (id, novoItem) => {
setItens(itensAnteriores =>
itensAnteriores.map(item =>
item.id === id ? novoItem : item
)
);
};
Por que não usar métodos diretos do Array?
Métodos como push, pop, splice ou shift modificam o array original, o que é contraproducente à imutabilidade que o React recomenda.
Por isso, ao atualizar arrays, sempre optamos por métodos que retornem um novo array.
Uso combinado de useEffect
Em certas situações, pode ser necessário executar efeitos colaterais após a atualização do array. O Hook useEffect é útil nesses casos:
useEffect(() => {
console.log("O array de itens foi atualizado!", itens);
}, [itens]);
Quer aprender mais sobre programação? Conheça nosso canal no YouTube:
Conclusão
Chegamos ao fim do artigo sobre como mudar estado de array em React JS!
No React, a imutabilidade é fundamental para manter o desempenho e evitar bugs. Ao atualizar arrays, essa prática é ainda mais crucial.
Utilizando as técnicas acima, garantimos que nossos componentes se comportem como esperado e otimizamos a performance do React.
Lembre-se: sempre evite modificar o estado diretamente. Em vez disso, crie uma nova cópia, faça suas alterações e, em seguida, defina essa cópia como o novo estado.
Esta abordagem, embora possa parecer um pouco mais trabalhosa inicialmente, garante um código mais robusto e otimizado.
Está buscando em evoluir como Programador? Confira o nossos cursos de programação.