DEV Community

Nathana Facion
Nathana Facion

Posted on

💎 Conhecem o useImmer ?

O use-immer simplifica a vida no React. Ele permite que você "mute" o estado diretamente em uma função de atualização, e a biblioteca Immer, de forma mágica, garante a imutabilidade por baixo dos panos. Basicamente ele substitui o useState.

O Problema (Estado Aninhado):
Imagine atualizar a rua dentro de um objeto complexo: usuario.contato.endereco.rua

😫 O Jeito "Raiz" (com useState)

Para garantir a imutabilidade, você é obrigado a copiar cada nível do objeto usando ...spread:

// Usando useState (precisa de muito ...spread)

setUsuario(prev => ({
    ...prev, // Cópia Nível 1
    contato: {
       ...prev.contato, // Cópia Nível 2
       endereco: {
          ...prev.contato.endereco, // Cópia Nível 3
          rua: 'Rua B' // Finalmente, a mudança
       }
    }
}));
Enter fullscreen mode Exit fullscreen mode

😎 O Jeito "que Brilha demais" (com use-immer)

Aqui, você recebe um rascunho (draft) e o trata como se fosse uma variável normal, mutando-o diretamente:
JavaScript

// Usando use-immer (simples e direto)

updateUsuario(draft => {
    // Apenas acesse e mude a propriedade, como em JS puro!
    draft.contato.endereco.rua = 'Rua B';
});
Enter fullscreen mode Exit fullscreen mode

🙏 Conclusão: O use-immer elimina o código repetitivo e a chance de erros, tornando a atualização de estados profundos no React muito mais limpa e fácil de ler.

Top comments (0)