Neste artigo você aprenderá a como fazer push para array que está no useState, a melhor maneira de modificar um array no useState
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.