Como fazer push para array que está no useState do React JS

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.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 18min

Conhecer formação

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.

Como renderizar esse array na tela:

Antes de sair adicionando item, vale mostrar como essa lista aparece pro usuário, porque é aqui que muita gente trava

<div>
{itens.map(item => (
<li key={item.id}>{item.valor}</li>
))}
</div>

O map percorre o array e devolve um elemento pra cada item

E a key? Ela é o crachá de cada item, o React usa isso pra saber quem entrou, quem saiu e quem mudou de lugar na lista

Tome cuidado: usar o índice do array como key funciona enquanto a lista só cresce no final, mas quebra na hora que tu remove ou reordena, porque aquele índice passa a apontar pra outro item

Sempre que teus itens tiverem um id próprio, use ele 🙂

Adicionando o item no começo da lista:

function AdicionarNoTopo(novoItem) {
}

Só inverti a ordem do spread e pronto, o item entra no topo

É o equivalente imutável do velho unshift

Adicionando vários itens de uma vez:

Dois spreads, um array novo, uma renderização só

Bem melhor do que ficar chamando o setItens dentro de um for pra cada item (e olha que isso tem uma pegadinha, te conto já já…)

Adicionei vários itens no loop e só o último ficou, por quê?

Esse é o erro que mais aparece depois que a pessoa já entendeu o spread

Se liga na versão quebrada:

novosItens.forEach(item => {
});

O itens ali dentro é o valor daquela renderização, ele não muda no meio do loop

Então cada chamada monta o mesmo array de novo e a última sobrescreve todo mundo

A versão certa usa a forma de função, que recebe o estado mais atual da fila de atualizações:

novosItens.forEach(item => {
});

É por isso que eu insisto no prevItens em vez de usar o itens direto

Não é frescura, é o que evita item sumindo sem explicação 😀

Cuidado com a cópia rasa quando o array tem objetos:

O spread cria um array novo, beleza

Mas os objetos lá de dentro continuam sendo os MESMOS objetos, ele copia só o primeiro nível

Ou seja, isso aqui ainda é mutação disfarçada:

setItens(copia);

O array é novo, mas o objeto da posição 0 é o mesmo de antes, e tu acabou de alterar o estado antigo na marra

O jeito seguro é montar um objeto novo também, usando map:

setItens(prevItens =>
prevItens.map((item, i) => i === 0 ? { ...item, valor: 'novo' } : item)
);

Já me ferrei uma vez com isso e demorei um bom tempo pra achar o motivo

Existe algum caso em que o push ainda serve?

Serve sim, desde que o array não seja o estado

Se tu está montando um array temporário dentro de uma função, pode dar push à vontade e só no final jogar tudo pro estado:

for (const linha of dados) {
novos.push(transformar(linha));
}

O que não dá é dar push no array que veio do useState e esperar que a tela atualize sozinha

A regra é essa: mutação em rascunho pode, mutação no estado não

E se eu estiver usando TypeScript?

Aqui o useState com array vazio precisa de uma ajudinha

Basta dizer o tipo na chamada:

type Item = { id: number; valor: string };

Depois disso o prevItens já chega tipadinho dentro do setItens, e o autocomplete faz o resto pra ti 🙂