Neste artigo você aprenderá a como fazer push para array que está no useState, a melhor maneira de modificar um array no useState

push para array que está no useState capa

Fala programador(a), beleza? Bora aprender mais sobre React JS!

No mundo do desenvolvimento com React JS, muitas vezes nos deparamos com cenários em que precisamos gerenciar listas ou arrays de dados.

O Hook useState nos oferece uma maneira simples e eficaz de gerenciar o estado local de um componente.

Mas, quando se trata de manipular um array que está dentro de um estado, surgem algumas questões importantes.

Neste artigo, aprenderemos a maneira correta e otimizada de adicionar itens a um array que está sendo gerenciado pelo Hook useState.

import React, { useState } from 'react';

function Lista() {
  const [itens, setItens] = useState([]);

  return (
    <div>
      {/* Renderização dos itens */}
    </div>
  );
}

Neste exemplo simples, temos um estado chamado itens, que é inicializado como um array vazio.

O método setItens é a função que usaremos para atualizar esse estado.

O Problema com Arrays e useState

Se você vem de uma experiência com classes em React ou com JavaScript em geral, pode pensar em fazer algo assim:

itens.push(novoItem);
setItens(itens);

No entanto, isso é problemático. O React depende da imutabilidade do estado para determinar quando re-renderizar um componente.

Se você simplesmente fizer push para o array e tentar setá-lo de volta ao estado, o React não reconhecerá isso como uma mudança no estado e, portanto, não re-renderizará o componente.

A Solução: Espalhar e Definir

A solução é criar uma nova cópia do array e, em seguida, fazer a alteração. Uma maneira comum e otimizada de fazer isso é usando o operador de propagação (spread).

Adicionando um Item

function AdicionarItem({ novoItem }) {
  setItens(prevItens => [...prevItens, novoItem]);
}

Aqui, usamos a função de atualização de forma do setItens, que nos fornece o estado anterior (prevItens).

Em seguida, espalhamos esses itens anteriores em um novo array e adicionamos o novoItem no final.

Por que isso funciona?

Ao usar o spread operator (...), estamos efetivamente criando uma nova cópia do array. Isso garante que o estado anterior e o novo estado sejam objetos diferentes, permitindo que o React detecte a mudança e re-renderize o componente.

Dicas Adicionais

Removendo um Item

Para remover um item, podemos usar o método filter.

function RemoverItem(id) {
  setItens(prevItens => prevItens.filter(item => item.id !== id));
}

Atualizando um Item

Para atualizar um item, podemos usar o método map.

function AtualizarItem(id, novoValor) {
  setItens(prevItens => prevItens.map(item => item.id === id ? {...item, valor: novoValor} : item));
}

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Trabalhar com arrays no estado de um componente React pode parecer desafiador à primeira vista, especialmente se você estiver acostumado a manipular diretamente os arrays.

No entanto, com uma compreensão sólida da imutabilidade e do uso correto dos métodos de array e do operador de propagação, você pode gerenciar facilmente listas no estado de seus componentes React.

Ao adotar estas práticas, você não apenas garantirá que seu componente se comporte corretamente, mas também aproveitará ao máximo os recursos de otimização de desempenho que o React tem a oferecer.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

Subscribe
Notify of
guest

0 Comentários
Inline Feedbacks
View all comments