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)