Maneira correta de mudar estado de array em React JS

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.