Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dúvida sobre interação entre useMemo e useEffect

Referente ao curso React: gerencie estados globalmente com Context API, no capítulo Melhorando o contexto com useReducer e atividade Otimizando performance com useMemo

por Vitor da Costa Domith
| 115.8k xp | 5 posts

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])
2 respostas
solução!
por Carlos Eduardo de Souza Lemos
| 873.7k xp | 253 posts
Analista de Suporte

O useEffect sem uma array de dependências funciona de forma diferente do useEffect com uma array de dependências. Vamos analisar ambos os casos.

useEffect sem array de dependências:

useEffect(() => {
    setQuantidade(quantidadeTemp)
    setValorTotal(totalTemp)
})

Neste caso, o useEffect será executado em cada renderização. Isso significa que sempre que o componente for renderizado, o código dentro do useEffect será executado. Isso pode levar a um comportamento indesejado, especialmente se o código dentro do useEffect realizar operações que não precisam ser repetidas a cada renderização.

useEffect com array de dependências:

useEffect(() => {
    setQuantidade(quantidadeTemp)
    setValorTotal(totalTemp)
}, [quantidadeTemp, totalTemp])

Aqui, o useEffect só será executado quando a quantidadeTemp ou totalTemp mudarem. Isso é útil para evitar execuções desnecessárias do useEffect quando os valores que ele depende não mudaram. Se esses valores não mudarem entre renderizações, o useEffect não será chamado.

No seu caso, se você quer que o useEffect seja invocado apenas quando quantidadeTemp ou totalTemp mudarem, a segunda abordagem com a array de dependências é a mais apropriada. Isso garante que o efeito seja acionado somente quando os valores relevantes mudarem, evitando execuções desnecessárias.

useEffect(() => {
    setQuantidade(quantidadeTemp)
    setValorTotal(totalTemp)
}, [quantidadeTemp, totalTemp])

Portanto, sim, faz sentido usar a segunda abordagem para otimizar o desempenho e garantir que o useEffect seja acionado apenas quando necessário, com base nos valores internos dependentes.

por Carlos Eduardo de Souza Lemos
| 873.7k xp | 253 posts
Analista de Suporte

Caso tenha conseguido esclarecer suas dúvidas, fico feliz em ter ajudado. Estou à disposição para qualquer outra questão que possa surgir. Um abraço! Se este post foi útil, por favor, marque como solucionado ✓. Desejo a você excelentes estudos!