Olá, Ygor. Como vai?
Você está coberto de razão! Excelente percepção e sensibilidade técnica. Esse é um erro clássico que costuma passar despercebido por muitas pessoas, mas que quebra um dos princípios mais fundamentais do React: a imutabilidade dos estados.
Como você muito bem pontuou, a linha const novaLista = brownies não cria um novo array na memória. Ela apenas copia a referência (o endereço de memória) do array original. No JavaScript, objetos e arrays são passados por referência.
O que acontece de errado nessa abordagem?
- Mutação Direta: Ao fazer
novaLista.push(...), o código altera diretamente o conteúdo do array que está dentro do estado brownies. - Falha na Renderização: O React é baseado em comparações rasas (shallow comparison) para saber se um estado mudou e se ele precisa atualizar a tela. Quando você chama
setBrownies(novaLista), o React compara o "novo" endereço com o "velho" endereço. Como ambos apontam exatamente para o mesmo lugar na memória, o React acha que nada mudou e não renderiza novamente a tela.
A Solução Correta (Como você propôs)
Sua solução utilizando o Spread Operator (...) está impecável. Ela cria um array totalmente novo na memória, descarrega os itens antigos lá dentro e permite que a atualização funcione perfeitamente:
const aoMudarInput = event => {
const novaLista = [...brownies] // Agora sim, uma cópia real com um novo endereço de memória
novaLista.push(event.target.value)
setBrownies(novaLista)
}
Dica de Ouro: Versão ainda mais enxuta
No ecossistema React, é ainda mais comum e elegante realizar essa operação em uma única linha, passando o novo array diretamente para a função de atualização:
const aoMudarInput = event => {
setBrownies([...brownies, event.target.value])
}
Parabéns pelo olhar clínico de depuração e pelo domínio sobre como o JavaScript gerencia referências na memória. Reportar isso no fórum ajuda imensamente outros estudantes que possam estar enfrentando bugs de interface travada por conta desse trecho!
Espero que possa ter lhe ajudado!
