Gerenciamento de estado mais simples com UseImmer no React

Lidar com o estado no React às vezes pode ser um desafio, especialmente quando se trata de entender as mutações e o tratamento adequado das referências. Ao usar o setter useState, muitas vezes é necessário criar novas matrizes ou objetos para garantir que o React reconheça suas alterações. Isso pode rapidamente se tornar confuso e exigir muito código. Uma alternativa é o useImmer, que permite que você altere o estado de uma maneira muito mais intuitiva. Neste guia, vamos percorrer o processo de como usar useImmer em vez de useState passo a passo.

Principais lições

• O useImmer é um substituto para o useState que facilita o manuseio do estado mutável no React.
• Com o useImmer, você pode fazer alterações diretamente em arrays e objetos sem ter que criar novas referências manualmente.
• As mutações são automaticamente convertidas em estados novos e imutáveis, o que torna o manuseio muito mais fácil.

Instruções passo a passo

Instalação do useImmer

Em primeiro lugar, é preciso garantir que o useImmer esteja instalado. Isso é feito usando o comando no terminal

npm install always

Quando a instalação estiver concluída, você deve verificar se o pacote aparece corretamente no seu arquivo package.json. Ele deve aparecer sempre na lista de dependências.

Usando o useImmer

Agora que o useImmer está instalado, você pode usá-lo no seu projeto. Basta importá-lo para o arquivo onde deseja gerenciar o estado:

import { useImmer } from 'use-immer';

Introdução ao uso do useImmer

Em comparação com o useState, a estrutura do seu código permanece praticamente a mesma. Em vez de useState, utiliza useImmer para obter o seu estado atual e uma função para alterar o estado.

const [videos, setVideos] = useImmer(initialVideos);

Neste exemplo, initialVideos é o valor inicial do seu estado. Pode agora utilizar setVideos para efetuar alterações ao seu estado.

Mutações com useImmer

Com useImmer, você tem a flexibilidade de alterar o estado diretamente. Isso significa que você pode usar métodos como push ou splice sem ter que criar manualmente um novo array ou objeto. Aqui está um exemplo de como pode adicionar um novo vídeo:

setVideos(draft => { draft.push(newVideo); // newVideo é o objeto a adicionar });

Neste caso, o rascunho será uma imagem modificável do seu estado. Quaisquer alterações feitas a ele resultarão automaticamente na criação de um estado novo e imutável.

Alterações a entradas existentes

Se quiser alterar uma entrada existente, isso também é simples com a ajuda do useImmer. Tudo o que tem de fazer é encontrar a entrada na matriz e efetuar as alterações desejadas:

setVideos(draft => { const videoToEdit = draft.find(video => video.id === targetId); if (videoToEdit) { videoToEdit.title = newTitle; // Altera o título videoToEdit.source = newSource; // Altera a fonte } });

Aqui pode aceder a um vídeo específico na matriz de rascunhos e efetuar as alterações pretendidas. Estas alterações são automaticamente tratadas como novas referências.

Eliminar uma entrada

A eliminação de uma entrada também é mais fácil. Pode utilizar filter ou splice para remover o elemento pretendido. Eis um exemplo com splice:

setVideos(draft => { const index = draft.findIndex(video => video.id === targetId); if (index!== -1) { draft.splice(index, 1); // remove o vídeo } });

Isso remove o vídeo com o ID correspondente da matriz de rascunho.

Integração em projectos existentes

Substituir useState por useImmer pode simplificar significativamente seu código e torná-lo mais legível. Só precisa de se certificar de que, onde quer que tenha usado useState, pode introduzir useImmer.

É importante notar que a utilização de useImmer não tem um impacto negativo no desempenho. No entanto, deve certificar-se sempre de que o seu código permanece claro e bem estruturado.

Resumo

Neste guia, você aprendeu como usar o useImmer em seu projeto React para simplificar o manuseio do estado. Agora você pode ter acesso direto às mutações, o que torna o desenvolvimento mais eficiente e agradável. Ao converter automaticamente para estados imutáveis, o React mantém o controle e garante que todas as alterações sejam reconhecidas corretamente.