Maneira correta de adicionar item a array de useState

Neste artigo você vai aprender a maneira correta de adicionar item a array de useState, ou seja, inserir itens em array no React

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

Se você é novo no desenvolvimento de aplicativos React, pode ficar confuso sobre a maneira correta de adicionar um item a um array em um estado useState.

Adicionar item a um array de useState é uma tarefa comum, mas é importante fazê-lo corretamente para evitar erros e comportamentos inesperados.

Em primeiro lugar, é importante entender como o useState funciona. O useState é um Hook do React que permite adicionar estado a um componente funcional.

Ele retorna um array com dois elementos: o primeiro elemento é o estado atual e o segundo elemento é uma função que permite atualizar o estado.

Quando se trata de adicionar um item a um array em um estado useState, a maneira correta de fazer isso é criar um novo array com o item adicionado e passar esse novo array para a função que atualiza o estado.

Aqui está um exemplo:

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState(['item 1', 'item 2']);

  function addItem() {
    const newItem = 'item 3';
    const newItems = [...items, newItem];
    setItems(newItems);
  }

  return (
    <div>
      <button onClick={addItem}>Adicionar item</button>
      <ul>
        {items.map(item => <li key={item}>{item}</li>)}
      </ul>
    </div>
  );
}

export default App;

Neste exemplo, temos um estado useState que contém um array com dois itens: ‘item 1’ e ‘item 2’. A função addItem é usada para adicionar um novo item ao array.

Primeiro, criamos um novo item com a variável newItem.

Em seguida, criamos um novo array com o operador spread ( … ) que adiciona o novo item ao final do array original.

Finalmente, chamamos a função setItems com o novo array como argumento, atualizando assim o estado com o novo array.

Ao criar um novo array com o item adicionado e passá-lo para a função setItems, garantimos que o estado é atualizado corretamente.

Se tentássemos modificar o estado atual diretamente, estaríamos violando a regra de imutabilidade do React e poderíamos causar comportamentos inesperados em nosso aplicativo.

Em resumo, ao adicionar um item a um array em um estado useState, a maneira correta de fazer isso é criar um novo array com o item adicionado e passá-lo para a função que atualiza o estado.

Isso garante que o estado seja atualizado corretamente e evita comportamentos inesperados em seu aplicativo React.

Com esta abordagem, você pode adicionar e remover itens de um array em seu estado useState com facilidade e segurança.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Em conclusão, adicionar item a um array de useState é uma tarefa comum em aplicativos React e é importante fazê-lo corretamente para evitar erros e comportamentos inesperados.

A maneira correta de adicionar um item a um array em um estado useState é criar um novo array com o item adicionado e passá-lo para a função que atualiza o estado.

Isso garante que o estado seja atualizado corretamente e mantém a integridade do estado em seu aplicativo React.

Lembre-se sempre da regra de imutabilidade do React ao atualizar estados, criando cópias dos valores que deseja atualizar e passando-as para a função de atualização de estado.

Com esta abordagem, você pode facilmente adicionar e remover itens de um array em seu estado useState com facilidade e segurança, garantindo assim um aplicativo React confiável e sem erros.

Está buscando em evoluir como Programador? Confira o nossos cursos clicando aqui.

Nosso principal objetivo é tornar você um dev profissional que é capaz de resolver problemas de alta dificuldade e criar projetos complexos, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Cursos com vários projetos, exercícios, material apoio, comunidade de alunos e muito mais!

A forma funcional do setState: quando o spread não basta

O exemplo acima funciona lindamente pra um clique de cada vez

Se duas atualizações acontecerem em sequência (dois cliques rápidos, uma chamada dentro de um setTimeout, uma resposta de API), a segunda pode ler o array velho e sobrescrever a primeira

A solução é passar uma FUNÇÃO pro atualizador, em vez do array pronto:

function addItem() {
}

Aqui o React te entrega o valor mais recente do estado no parâmetro, então você nunca depende da variável capturada no render

É como pedir a conta atualizada pro garçom em vez de confiar no papelzinho que você anotou dez minutos atrás 🙂

Regra prática: se o novo estado depende do estado anterior, use a forma funcional

Por que não posso usar push? Tome cuidado!

A tentação é enorme, principalmente pra quem vem de JavaScript puro:

// não faça isso
items.push('item 3')
setItems(items)

Parece certo, mas a tela não atualiza

O push altera o MESMO array na memória, então a referência continua sendo a mesma

E o React compara referências pra decidir se precisa renderizar de novo: se a referência não mudou, pra ele nada mudou

O spread resolve justamente isso, porque cria um array novo, com uma referência nova

Como adicionar item no início do array:

Mesma ideia, só que invertendo a ordem do spread:

O que vem antes das reticências entra na frente da lista

E se você quiser adicionar vários itens de uma vez, é só espalhar os dois arrays:

Simples assim, sem concat, sem loop, sem drama

Como adicionar um objeto ao array de useState:

Na vida real quase nunca é uma string solta, é um objeto (tarefa, produto, usuário)

A mecânica é idêntica, mas aí aparece a questão da key:

function addTarefa(titulo) {
const nova = { id: crypto.randomUUID(), titulo, feita: false }
}

return (
<ul>
{tarefas.map(tarefa => (
<li key={tarefa.id}>{tarefa.titulo}</li>
))}
</ul>
)

Repare que a key agora é o id, e não o texto

Usar o texto como key funciona enquanto ele for único, mas no dia que dois itens tiverem o mesmo nome o React se perde

Usar o índice do map como key é pior ainda: quando você remove ou reordena, os índices dançam e o React reaproveita o elemento errado

Como remover e atualizar um item do array:

O post promete adicionar E remover, então bora fechar o ciclo

Pra remover, filter (que já devolve um array novo, então a imutabilidade sai de graça):

function removeItem(id) {
setItems(atuais => atuais.filter(item => item.id !== id))
}

Pra atualizar um item específico, map devolvendo uma cópia só do que mudou:

function marcarFeita(id) {
setItems(atuais =>
atuais.map(item =>
item.id === id ? { ...item, feita: true } : item
)
)
}

Repare no padrão: filter e map sempre devolvem array novo, por isso combinam tão bem com estado no React

Já push, splice e companhia mexem no original, e é aí que a tela trava

Perguntas frequentes sobre adicionar item a array no useState

Por que o item não aparece na tela depois do setState?

Na maioria das vezes é push no array original: a referência não mudou, então o React não renderiza de novo

Crie um array novo com spread e passe ele pro atualizador

Por que ao adicionar dois itens seguidos só um entra?

As duas chamadas leram o mesmo array do render anterior, então a segunda sobrescreveu a primeira

Por que o estado parece "atrasado" se eu ler logo depois do setState?

A variável de estado do render atual não muda no meio da função

Se você precisa do valor novo ali mesmo, guarde ele numa constante antes e use essa constante

Preciso do spread pra adicionar item em array de objetos?

Sim, e em dois níveis: array novo pra lista e objeto novo pro item que você alterar

Se você editar o objeto de dentro direto, a lista continua com a mesma referência e o React ignora

Dá pra inicializar o useState com array vazio?

Dá, e é o mais comum quando os dados vêm de uma API

Só garanta que o map do JSX aguenta a lista vazia, senão a tela quebra antes dos dados chegarem