使用 React `useCallback` 挂钩的依赖项作为回调的 arguments 是否更高效？

Question

Suppose I have a callback function in React which uses variables a , b , and c . I want to know the best way to make use of the useCallback hook.

I can create a callback which takes no arguments and use [a,b,c] as the dependencies array.

const onMutate = useCallback( () => {~~~~} , [a,b,c] )
~~~~ onPress={onMutate}

Or I can create a callback which takes arguments (a,b,c) and has an empty dependency array.

const onMutate = useCallback( (a,b,c) => { ~~~~} , [] )
~~~~ onPress={() => onMutate(a,b,c)}

In the former, the callback function is newly created each time, but there is no anonymous function in onPress.

In the latter, the callback function is created only once, but an anonymous function is created in onPress each time.

Which case is better?

Answer 1

First keep in mind: Using useCallback is not always a good case, as Kent C. Dodds says .

However, if you really wanna go with useCallback it also only makes sense, when the value in useCallback is memoized. See this one CodeSandbox: https://codesandbox.io/s/quizzical-dawn-glqlg

---

That being said, if you are sure to use useCallback it doesn't matter, which way you are going, because in the very best case, all three of those variables are being memoized in the first run.