Want to understand the dependency in usecallback

Question

    const [balance, setBalance] = useState();
    const pollBalance = useCallback(async (provider, address) => {
        if (provider && address) {
            const newBalance = await provider.getBalance(address);
            if (!newBalance.eq(balance !== null && balance !== void 0 ? balance : zero)) {
                setBalance(newBalance);
                console.log(address, newBalance.toString(), balance);
            }
        }
    }, [balance]);

As I understand this UseCallBack Hook . The PollBalance function will only get callled if the balance changes right otherwise it will use the previous state itself

But I am changing my balance state inside of the function right ? using setBalance(newBalance) . So technically that means my pollBalance will never get caled because my balance never changes right?

what is the error you are facing, can you please give more detail on it? — Jatin Parmar, Oct 09 '22 at 14:42
PollBalance will not be called ,you will have to make a call to it — Jatin Parmar, Oct 09 '22 at 14:44
@JatinParmar Its not an issue , I have a doubt regarding the usecallback here my balance will be the dependency right? that means pollbalance function will only be called if there is a change in the balance or else it will be the previous state of the function right? my balance will only change inside of the pollbalance (setBalance(newBalance) that effectively means my pollbalance will never be called because my balance will never change right? Am I thinking the right way? — TECH HINDER, Oct 09 '22 at 14:53

score 1 · Answer 1 · answered Oct 09 '22 at 14:52

The PollBalance function will only get callled if the balance changes right

So technically that means my pollBalance will never get caled because my balance never changes right?

The code you've shown has nothing to do with calling pollBalance, it's just about creating pollBalance. If the values in the dependency array have changed, then a new function is created and assigned to the variable pollBalance. If they havn't changed, then pollBalance will be assigned the previous function and the new function is thrown out.

Whether pollBalance gets called or not depends on if you have a line of code that looks like pollBalance(someProvider, someAddress), which was not included in the code you showed.

P.S, since your new state depends on your old state, I recommend you switch to using the function version of setBalance. This will also let you remove balance from the dependency array:

const [balance, setBalance] = useState();
const pollBalance = useCallback(async (provider, address) => {
  if (provider && address) {
    const newBalance = await provider.getBalance(address);
    setBalance((prev) => {
      if (!newBalance.eq(prev !== null && prev !== void 0 ? prev : zero)) {
        console.log(address, newBalance.toString(), prev);
        return newBalance;
      } else {
        return prev;
      }
    });
  }
}, []);

Thanks for replying I have a small doubt my pollbalance will only get created if my dependency that is balance changes right? but my dependencies is being changes inside the pollbalance function only (setBalance(newBalance) ) . Which means my pollBalance will never get created again because my dependency never changes right — TECH HINDER, Oct 09 '22 at 15:06
`Which means my pollBalance will never get created again because my dependency never changes right ` Yes, if the dependencies never change, the function never gets created again. Which is a good thing; it means useCallback is doing its job. — Nicholas Tower, Oct 09 '22 at 17:04
this is wrong, everytime u access pollBalance, balance always null — famfamfam, Dec 31 '22 at 12:59

score 0 · Accepted Answer · answered Oct 09 '22 at 15:15

You have misconception about useCallback hook,And its this

As I understand this UseCallBack Hook . The PollBalance function will only get callled if the balance changes right otherwise it will use the previous state itself

First thing useCallback is for creating a callback,You can write a function inside your functional component without using useCallback. But problem with this way is every time your function component will re-render you will have new reference to same function,If you are passing such a function to any other child component then it will may cause that child component to re-render as reference of function is changed in props. To over come with this use case we have useCallback. So by using useCallback hook ,you are creating a function not calling it. And every time balance will change your refence to function will change. Which you are storing in PollBalance (indirectly you are redefining same function with updated dependencies).While using useCallback hook , every value referenced inside the callback should also appear in the dependencies array.because if you dont do so ,call back will use older values,here in your code you will need to pass both balance, setBalance in dependency array.

const pollBalance = useCallback(async (provider, address) => {
if (provider && address) {
    const newBalance = await provider.getBalance(address);
    if (!newBalance.eq(balance !== null && balance !== void 0 ? balance : zero)) {
        setBalance(newBalance);
        console.log(address, newBalance.toString(), balance);
    }
}
}, [balance,setBalance]);

and make call to pollBalance on some event like button click or something ,it will not called automatcally.

Hope this will help.

Want to understand the dependency in usecallback

2 Answers2