No React, atualizar arrays no state é bastante simples, mas pode ser fácil cometer um erro, especialmente se você vem do vanilla JavaScript onde você pode modificar arrays diretamente. No React, o estado é tratado como imutável para que ele possa reconhecer mudanças e fazer as atualizações adequadas na interface do usuário. Vamos ver como você pode atualizar arrays mantidos no estado em React. Um dos erros mais comuns ao atualizar arrays em um estado React é modificar diretamente o array usando métodos como push(), pop() ou splice(). Esses métodos mutam o array original e o React não permite isso. React depende de uma nova referência de array para detectar mudanças, então modificar diretamente o array pode impedir que o componente seja re-renderizado como esperado. Aqui está um exemplo de uso do método push() para adicionar a um array no estado, que não funcionará:

import { useState } from "react";

function ItemsList() {
  const [items, setItems] = useState([
    { id: 0, name: "Item 1" },
    { id: 1, name: "Item 2" },
    { id: 2, name: "Item 3" },
  ]);

  const addItem = () => {
    const newItem = { id: items.length + 1, name: Item ${items.length + 1} };
    items.push(newItem); // This modifies the original array
    setItems(items); // React will not detect this change
  };

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

export default ItemsList;

Se você clicar no botão Add Item, nada acontece na interface do usuário. Também pode ser tentador remover itens do array com o método pop():

const removeItem = () => {
  items.pop(); // Modifies the original array
  setItems(items); // React will not detect this change, either
};

Para atualizar um array no state, a chave é criar um novo array, fazer suas operações e passar isso para o React, em vez de modificar o array existente. Como é um novo array, o React saberá que o estado foi alterado e acionará uma nova renderização. Aqui está como você pode adicionar ao array items usando o operador spread:

const addItem = () => {
  const newItem = {
    id: items.length + 1,
    name: Item ${items.length + 1},
  };

  // Creates a new array
  setItems((prevItems) => [...prevItems, newItem]);
};

[...prevItems, newItem] cria um novo array copiando todos os itens do array items existente mantido no estado, depois adiciona newItem no final, o que incrementa o id e o número do item. Se você quiser remover algo do array, pode usar o método filter(), que retorna um novo array após filtrar o que você quer remover:

const removeItem = (id) => {
  setItems((prevItems) => prevItems.filter((item) => item.id !== id));
};

Aqui está o código completo:

import { useState } from "react";

function ItemsList() {
  const [items, setItems] = useState([
    { id: 0, name: "Item 1" },
    { id: 1, name: "Item 2" },
    { id: 2, name: "Item 3" },
  ]);

  const addItem = () => {
    const newItem = { id: items.length + 1, name: Item ${items.length + 1} };
    setItems((prevItems) => [...prevItems, newItem]); // Creates a new array
  };

  const removeItem = (id) => {
    setItems((prevItems) => prevItems.filter((item) => item.id !== id)); // Creates a new array
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.name}{" "}
            <button onClick={() => removeItem(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ItemsList;

Essas são algumas formas comuns de atualizar um array no state.