Como deletar item de array em state no React JS

Neste artigo você aprenderá a como deletar item de array em state no React, ou seja, utilizando o useState em um array

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

Manipular estados em React é uma tarefa comum, e muitas vezes, nos deparamos com a necessidade de atualizar arrays que estão armazenados no estado de um componente.

Neste artigo, abordaremos uma das operações mais frequentes: a remoção de um item de um array.

Introdução ao gerenciamento de estados no React

O React proporciona uma maneira eficaz de gerenciar o estado local de um componente por meio do hook useState.

Quando utilizamos arrays como estado, precisamos ter um cuidado especial para não modificar diretamente o estado original, mas sim criar uma cópia dele e então realizar a atualização.

A armadilha da mutabilidade

Em JavaScript, arrays são estruturas de dados mutáveis. Isso significa que, se você tentar deletar um item diretamente do array do estado, você estará modificando o estado diretamente, o que é uma má prática no React.

Em vez disso, sempre trabalhe com uma cópia do estado, e depois atualize o estado com o novo array.

Exemplo prático: Deletando um item de um array

Vamos criar um componente simples que tem um estado com uma lista de tarefas e a capacidade de remover uma tarefa específica.

import React, { useState } from 'react';

const ListaDeTarefas = () => {
    const [tarefas, setTarefas] = useState(['Tarefa 1', 'Tarefa 2', 'Tarefa 3']);

    const removerTarefa = (index) => {
        const novasTarefas = [...tarefas];
        novasTarefas.splice(index, 1);
        setTarefas(novasTarefas);
    }

    return (
        <div>
            <ul>
                {tarefas.map((tarefa, index) => (
                    <li key={index}>
                        {tarefa}
                        <button onClick={() => removerTarefa(index)}>Remover</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default ListaDeTarefas;

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Explicando o processo

No exemplo acima, temos uma lista inicial de tarefas. A função removerTarefa é responsável por deletar uma tarefa baseada no índice.

Note que, ao invés de modificar diretamente o array tarefas, criamos uma cópia com [...tarefas].

Em seguida, usamos a função splice para remover o item e, finalmente, atualizamos o estado com o novo array.

Por que não usar o filter?

Uma alternativa ao splice é o método filter. Ele pode ser mais intuitivo quando se deseja remover itens de um array baseado em uma condição:

const removerTarefa = (index) => {
    const novasTarefas = tarefas.filter((_, i) => i !== index);
    setTarefas(novasTarefas);
}

Ambas as abordagens são válidas e a escolha entre elas geralmente se baseia na preferência pessoal ou na especificidade do cenário.

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

Conclusão

Chegamos ao fim do artigo sobre deletar item de array em state no React!

Manipular arrays no estado do React requer atenção para garantir que não estejamos alterando o estado diretamente.

Seja usando splice ou filter, o importante é trabalhar com uma cópia do estado original e, depois, atualizá-lo. Isso garante que o React possa otimizar as re-renderizações e manter o aplicativo eficiente.

Trabalhar com estados no React pode parecer desafiador no início, especialmente quando estamos lidando com estruturas de dados mais complexas como arrays.

No entanto, com a prática e o entendimento das melhores abordagens para manipular esses dados, o processo se torna intuitivo e eficiente.

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

splice ou filter: qual usar em cada caso?

Os dois resolvem, mas eles não são a mesma coisa por baixo

O filter percorre o array e devolve um array NOVO, sem tocar no original

Ou seja: ele já nasce pronto pra ir direto no setTarefas

Já o splice altera o próprio array em que é chamado

Se tu chamar tarefas.splice(index, 1) direto no state, tu mutou o array original e o React fica sem enxergar mudança nenhuma

Uma régua simples pra não travar na escolha:

filter quando a remoção é por condição (id, texto, item concluído e por aí vai)

splice quando tu já tem uma cópia na mão e quer remover por posição

Na dúvida, vai de filter que tu não se enrola com mutação 🙂

Deletando um item por id (o caso mais comum no mundo real):

Na vida real a lista quase nunca é de strings soltas, é de objetos vindos de uma API

E aí remover por índice vira cilada: a posição muda toda vez que a lista é filtrada, ordenada ou recarregada

O jeito seguro é remover pelo identificador do próprio item

import React, { useState } from 'react';

const ListaDeTarefas = () => {
{ id: 1, titulo: 'Estudar React' },
{ id: 2, titulo: 'Revisar o PR' },
{ id: 3, titulo: 'Codar o projeto' },
]);

const removerTarefa = (id) => {
setTarefas(tarefas.filter((tarefa) => tarefa.id !== id));
}

return (
<ul>
{tarefas.map((tarefa) => (
<li key={tarefa.id}>
{tarefa.titulo}
<button onClick={() => removerTarefa(tarefa.id)}>Remover</button>
</li>
))}
</ul>
);
}

export default ListaDeTarefas;

Repara que a key agora é o tarefa.id, e não mais o índice

Já te conto o porquê disso ali embaixo…

Tome cuidado com o key={index}:

Esse é o detalhe que mais pega quem está começando

Quando tu remove um item do meio da lista, todos os itens seguintes mudam de índice

O que era 2 vira 1, o que era 3 vira 2 e por aí vai

Só que a key existe justamente pra o React saber QUAL item é qual entre uma renderização e outra

Com o índice como key, a identidade de cada item muda junto com a lista

E aí pode dar ruim assim: tu clica em remover num item e parece que sumiu outro, ou o texto digitado num input da lista aparece na linha errada

A saída é usar um valor estável e único do próprio dado:

<li key={tarefa.id}>

Se o teu array é de strings simples e sem repetição, o próprio valor pode servir de key

E se não existe nada único, gera um id na hora de criar o item, antes de jogar no state

Removendo com a forma de função do setState:

Tem uma versão do mesmo código que evita dor de cabeça quando várias remoções acontecem perto uma da outra

Em vez de ler o tarefas de fora, tu recebe o estado anterior como argumento:

const removerTarefa = (id) => {
setTarefas((tarefasAtuais) => tarefasAtuais.filter((tarefa) => tarefa.id !== id));
}

O tarefasAtuais é sempre o valor mais recente do estado naquele ponto da atualização

Por isso essa forma é a mais segura como padrão em qualquer função que remove, adiciona ou alterna item da lista

Mesma lógica, só que sem depender da variável que estava lá fora no momento em que o clique aconteceu

E se eu quiser remover vários itens de uma vez?

Mesma ideia, muda só a condição do filter

Removendo tudo que já foi concluído:

const limparConcluidas = () => {
setTarefas((atuais) => atuais.filter((tarefa) => !tarefa.concluida));
}

Removendo uma lista de ids selecionados:

const removerSelecionadas = (idsSelecionados) => {
setTarefas((atuais) => atuais.filter((tarefa) => !idsSelecionados.includes(tarefa.id)));
}

Um filter só resolve os dois casos, sem loop e sem splice em cascata

E olha que legal: se tu tentar remover vários com splice dentro de um loop, os índices vão mudando no meio do caminho e tu acaba deletando item errado

Mais um ponto pro filter 😀

Removi o item e a tela não atualiza, e agora?

Esse é o problema mais comum dessa tarefa, e quase sempre é uma destas três causas:

1. Tu mutou o array do state direto

O conteúdo muda, mas a referência continua sendo a mesma, então o React não enxerga mudança pra re-renderizar

2. Tu esqueceu de chamar o setState

Criar a cópia e filtrar não muda nada sozinho

A tela só atualiza quando o novo array vai pro setTarefas

3. Tu está usando um estado velho dentro de um callback

Se a remoção acontece dentro de um setTimeout, de um handler assíncrono ou de uma sequência de cliques rápidos, usa a forma de função com o estado anterior que a gente viu ali em cima

É o tipo de coisa que faz qualquer um jurar que é bug do React haha

Perguntas rápidas sobre deletar item de array no React:

Dá pra usar o delete do JavaScript pra remover do array?

Dá, mas evita: o delete deixa um buraco na posição e o tamanho do array continua o mesmo

Além de mutar o array do estado, tu ainda ganha um item fantasma no map

Preciso copiar o array antes de usar o filter?

Não, o filter já devolve um array novo

A cópia com spread só é necessária pros métodos que mutam, como o splice

E se o array estiver dentro de um objeto no state?

Copia o objeto e troca só a chave do array:

setDados((atuais) => ({
...atuais,
tarefas: atuais.tarefas.filter((tarefa) => tarefa.id !== id),
}));

Como remover só o primeiro ou o último item?

Com slice, que não muta nada:

setTarefas((atuais) => atuais.slice(1)) tira o primeiro

setTarefas((atuais) => atuais.slice(0, -1)) tira o último

Gerou esse componente com IA? Checa estes três pontos:

Hoje boa parte dessa lista sai pronta numa conversa com IA, e isso é ótimo pra velocidade

Só que a revisão continua sendo tua

Antes de aceitar o código, roda o olho em três coisas:

O state está sendo copiado ou mutado direto?

A key do map é um id estável ou é o índice?

A atualização usa o estado anterior quando a remoção pode acontecer em sequência?

São os mesmos três pontos que a gente viu aqui no post, e são justamente os que passam batido numa revisão corrida no modo 100% vibe coder

Saber o porquê de cada um é o que separa aceitar o código de revisar o código 😉