JavaScriptObjetosavancado

Imutabilidade com spread

Em aplicações React ou Redux, atualizar o estado de forma imutável evita bugs sutis de referência e garante que o React detecte mudanças corretamente. Mudar diretamente um objeto aninhado pode causar efeitos colaterais inesperados, como componentes que não re-renderizam. Dominar a imutabilidade com spread é essencial para manter previsibilidade em projetos reais.

O PROBLEMA

Implemente funções puras para atualizar estado aninhado sem mutação.

EXEMPLO

const novo = atualizarEndereco(usuario, "SP");
usuario.endereco.cidade → "Recife" // original intacto!

SOBRE O CONCEITO

O operador spread (...) cria uma cópia superficial do objeto, copiando apenas as propriedades do primeiro nível. Em objetos aninhados, como usuario.endereco, a referência interna é mantida, então alterar endereco.cidade acaba mutando o original. Para evitar isso, é preciso espalhar também os objetos aninhados: { ...usuario, endereco: { ...usuario.endereco, cidade: novaCidade } }. Usar funções puras com const e arrow function ajuda a garantir que nenhuma mutação ocorra. O erro comum de 'spread raso' acontece justamente por esquecer de copiar os níveis mais profundos.

RESOLUÇÃO

Mais exercícios de Objetos

JSO011 · IntermediárioFactory functionJSO001 · BásicoCriar objeto simplesJSO003 · BásicoMétodo no objetoJSO006 · BásicoDesestruturação de objeto
Ver todos os exercícios de JavaScript