Ao refatorar o código visando performance, o instrutor utilizou do hook useMemo para guardar valores já previamente calculados para evitar lógica interna repetida. Porém o que não estou entendendo é como o useEffect continua funcionando mesmo sem a array de dependências. Sendo que é esse hook que atualiza os estados da quantidade e valorTotal, o que restringe esse hook ou qual é a condicional para que seja invocada?
const {totalTemp, quantidadeTemp} = useMemo(() => {
return carrinho.reduce((acumulador, produto) => (
{
//1° parâmetro, função redutora
quantidadeTemp: acumulador.quantidadeTemp + produto.quantidade,
totalTemp: acumulador.totalTemp + produto.preco * produto.quantidade
}),
{
//2° parâmetro valores inciais
quantidadeTemp: 0,
totalTemp: 0,
}
)
}, [carrinho])
useEffect(() => {
setQuantidade(quantidadeTemp)
setValorTotal(totalTemp)
})
E se, ao invés do useEffect for invocado a cada render ele só fosse chamado baseado nos valores internos que dependentes? Also assim, faria sentindo?
useEffect(() => {
setQuantidade(quantidadeTemp)
setValorTotal(totalTemp)
}, [quantidadeTemp, totalTemp])
