Why useEffect doesn't set balance on Web3 and React?

Question

 const [ currentBalance, setBalance ] = useState(0);

Inside the login function I have get account and I want to get the balance with:

const onLogin = async (provider) => {
const web3 = new Web3(provider);
const accounts = await web3.eth.getAccounts();
const chainId = await web3.eth.getChainId();

// Comprobamos las cuentas
if(accounts.length === 0) {
  console.log("Por favor, conectate con MetaMask!");
} else if (accounts[0] !== currentAccount) {
  setProvider(provider);
  setWeb3(web3);
  setChainId(chainId);
  setCurrentAccount(accounts[0]);
  setIsConnected(true);
  const respuestaBal = await web3.eth.getBalance(accounts[0]);
  const balance = web3.utils.fromWei(respuestaBal, "ether");
  setBalance(balance);
}
}

The problem is that this balance is never set.

useEffect(() => {
const handleAccountChanged = async (accounts) => {
  if(accounts.length === 0) {
    onLogout();
  } else if (accounts[0] !== currentAccount) {
    setCurrentAccount(accounts[0]);
    const balance = await web3.eth.getBalance(accounts[0]);
    setBalance(balance);
    
    console.log("BALANCE1: ", balance); // Working
    console.log("BALANCE2: ", currentBalance); // Dont working
  }
}

if(isConnected) {
  provider.on("accountsChanged", handleAccountChanged);
}

return () => {
  if(isConnected) {
    provider.removeListener("accountsChanged", handleAccountChanged);
  }
  
}

}, [isConnected])

I have also tried within the useEffect when I make an account change the code if it recognizes it but it does not recognize that "balance change"

`console.log("BALANCE2: ", currentBalance); // Dont working` this is normal behavior, try read this: https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately — coglialoro, Mar 18 '22 at 22:19
If you're asking why `currentBalance` isn't logged as the new value, it's because state updates are asynchronous. `setBalance(balance)` will queue the state update, and `console.log("BALANCE2: ", currentBalance);` runs long before the state update happens, with the old/stale value. Please review the question linked in the previous comment. — Andy Ray, Mar 18 '22 at 23:54

score 0 · Accepted Answer · answered Mar 18 '22 at 22:21

0

const [ currentBalance, setBalance ] = useState(0);
const getBalance = async () => {

    const balance = await web3.eth.getBalance(accounts[0])
    return balance
    
  }

getBalance().then((res) => (setBalance(res)))

Try this.

answered Mar 18 '22 at 22:21

Rodrigo Burgos

205
3
12

Dont work. I try this on useEffect and normal function but same... – JSanchezFDZ Mar 18 '22 at 22:29
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 19 '22 at 21:39

Why useEffect doesn't set balance on Web3 and React?

1 Answers1