[Dúvida] Diferença entre utilizar o useMemo e o useEffect nesse caso

Não entendi porque ganhamos performance utilizando o useMemo nessa parte do código ao invés de manter o useEffect.

Anteriormente tínhamos o useEffect com um array de dependências que incluía somente o carrinho.

  useEffect(() => {
    const { totalTemp, quantidadeTemp } = carrinho.reduce(
      (acumulador, produto) => ({
        quantidadeTemp: acumulador.quantidadeTemp + produto.quantidade,
        totalTemp: acumulador.totalTemp + produto.preco * produto.quantidade,
      }),
      {
        quantidadeTemp: 0,
        totalTemp: 0,
      }
    );
    setQuantidade(quantidadeTemp);
    setValorTotal(totalTemp);
  }, [carrinho]);

Agora utilizando o useMemo também usamos apenas o carrinho como dependência.

  const { totalTemp, quantidadeTemp } = useMemo(() => {
    return carrinho.reduce(
      (acumulador, produto) => ({
        quantidadeTemp: acumulador.quantidadeTemp + produto.quantidade,
        totalTemp: acumulador.totalTemp + produto.preco * produto.quantidade,
      }),
      {
        quantidadeTemp: 0,
        totalTemp: 0,
      }
    );
  }, [carrinho]);

Não entendi que diferença faz usar o useMemo nesse caso sendo que ele faz o cálculo a cada atualização do carrinho, assim como o useEffect fazia anteriormente.

Atualização

Pelo que li na documentação do useMemo, a diferença seria que o useMemo não roda o cálculo novamente quando o array de dependências não mudou, apenas envia o resultado anterior, o que nos daria um ganho de performance. É isso mesmo?

Olá, Dara!

Sua pergunta é muito pertinente e a resposta é sim, você está correta. O hook useMemo é utilizado para otimizar a performance da aplicação. Ele memoriza o valor de uma variável e só recalcula quando as dependências mudam. No seu caso, o useMemo está sendo usado para memorizar o resultado da função que calcula o totalTemp e o quantidadeTemp baseado no carrinho.

Quando você usava o useEffect, a função era executada toda vez que o componente era renderizado, independentemente de se o carrinho tinha mudado ou não. Isso pode levar a cálculos desnecessários e diminuir a performance da aplicação, especialmente se o carrinho for grande ou a função for complexa.

No entanto, quando você usa o useMemo, a função só é executada quando o carrinho muda. Se o carrinho não mudar entre renderizações, o useMemo simplesmente retorna o valor memorizado da última vez que a função foi executada. Isso pode melhorar significativamente a performance da aplicação.

Por exemplo, imagine que você tem um carrinho com 1000 itens e o usuário está apenas navegando na página, sem adicionar ou remover itens do carrinho. Sem o useMemo, a função seria executada a cada renderização, recalculando o totalTemp e o quantidadeTemp 1000 vezes. Com o useMemo, a função só seria executada uma vez, e as próximas renderizações apenas retornariam o valor memorizado.

Espero ter ajudado e bons estudos!