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
}
}
}));
😎 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';
});
🙏 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)