Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Me corrija se eu tiver errado... useEffect Loop

Dentro do hook useSaldo

import { useEffect, useState } from 'react';
import { buscaSaldo } from '../services/saldo';

export default function useSaldo() {
  const [saldo, setSaldo] = useState(0);

  async function obtemSaldo() {
    setSaldo(await buscaSaldo());
  }

  useEffect(() => {
    obtemSaldo();
  }, [saldo]);

  return [saldo, setSaldo];
}

Vemos que tem um problema de recursao comum com o useEffect... setSaldo altera saldo > useEffect chama obtemSaldo() por saldo ser alterado > obtemSaldo() chama o setSaldo novamente. Temos um loop de useEffect.

ta certo isso?

1 resposta
solução!

Oi Amir!

Certinho Amir. Isso acontece porque o useEffect tá de "olho" na variável saldo e, toda vez que rola uma mudança feita pelo setSaldo, o useEffect entra em ação de novo, chamando obtemSaldo, que daí chama setSaldo de novo, e por aí vai.

Caso não queira isso, você deve remover saldo da lista de dependências do useEffect. Dessa forma, o useEffect será executado apenas uma vez, quando o componente for montado.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!