React useCallback setting dependency on a function called inside the callback

Question

I'm working on a web app using react and saw this implemented there. It goes something like this:

const onAddNewAccount = useCallback(async () => {
   await refetch();
   setOtherState((prev) => {...});
},
[refetch]);

I don't understand why do this, is this actually something correct? Because from what I understand the callback will be called on one of the dependencies changing.

From what I've seen calling refetch won't actually trigger useCallback probably because it is just called right? not changed.

So basically I need help understanding why they did this.

Nicholas Tower · Accepted Answer · 2021-11-25 16:35:54Z

2

the callback will be called on one of the dependencies changing.

No, it won't be called, it will just be recreated. The purpose of useCallback is to memoize the function and reuse it if nothing has changed. In other words, it's trying to make it so onAddNewAccount from render 1 === onAddNewAccount from render 2.

If refetch changes, then the memoization will break and a new function is created. That way the new onAddNewAccount can call the new refetch if needed. If refetch never changes, then that's great: the memoization can last forever then.

answered Nov 25, 2021 at 16:35

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

WilsonPena Over a year ago

Oh I think I get it. So refetch is in the deps in case this component is called from another parent component with a different refetch implementation, is that it?

WilsonPena Over a year ago

that way onAddNewAccount will be recreated with the different refetch method

Nicholas Tower Over a year ago

in case this component is called from another parent component with a different refetch implementation It's there in case refetch changes from one render to the next. For example, if the parent component rerenders and creates a new refetch function. that way onAddNewAccount will be recreated with the different refetch method Correct

Collectives™ on Stack Overflow

React useCallback setting dependency on a function called inside the callback

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related