javascript - React: useCallback - useCallback with empty dependency array VS not using useCallback at all - Stack Overflow

admin管理员组

文章数量:1241148

I'm optimizing performance to an app and I wondered if to use useCallback hook on function that those not depend on any variable.

consider the following case: let's say we have some function:

const someFunc = () => {
  let someVar = "someVal";
  /**
   * here some extra calculations and statements regarding 'someVar'.
   * none of the statements depends on a variable outside this function scope.
   */
  return someVar;
};

This function does not depend on any variable so we can wrap it with useCallback with an empty array:

const someFunc = useCallback(() => {
  let someVar = "someVal";
  return someVar;
}, []);

now my question is - Does:

• react actually declare the function (with memory allocation and things, something like this):

const someFunc = () => {
  let someVar = "someVal";
  return someVar;
};
const someFuncCallback = React.useCallback(someFunc , [])

• OR react does first check the dependencies array, and if none of the dependencies changed used to previously allocated function in the memory?

if the first statement is true, then we should not use useCallback on functions that do not depend on any other var because the function will be declared all over again anyway.

but if the second statement is true then we should use useCallback hook on any function that is more 'expensive' to declare then a single useCallback call statement, but I have no idea how expensive it to call to react useCallback (from the perspective of memory and CPU usages).

---

I found this very nice blog which says that the first statement is true. but if you check react docs about useCallback hook you will see it written that react useCallback uses memorized call which means returning the cached result when the same inputs occur again, so maybe I don't get somethings, which of them is correct?

I'm optimizing performance to an app and I wondered if to use useCallback hook on function that those not depend on any variable.

consider the following case: let's say we have some function:

const someFunc = () => {
  let someVar = "someVal";
  /**
   * here some extra calculations and statements regarding 'someVar'.
   * none of the statements depends on a variable outside this function scope.
   */
  return someVar;
};

This function does not depend on any variable so we can wrap it with useCallback with an empty array:

const someFunc = useCallback(() => {
  let someVar = "someVal";
  return someVar;
}, []);

now my question is - Does:

• react actually declare the function (with memory allocation and things, something like this):

const someFunc = () => {
  let someVar = "someVal";
  return someVar;
};
const someFuncCallback = React.useCallback(someFunc , [])

• OR react does first check the dependencies array, and if none of the dependencies changed used to previously allocated function in the memory?

if the first statement is true, then we should not use useCallback on functions that do not depend on any other var because the function will be declared all over again anyway.

but if the second statement is true then we should use useCallback hook on any function that is more 'expensive' to declare then a single useCallback call statement, but I have no idea how expensive it to call to react useCallback (from the perspective of memory and CPU usages).

---

I found this very nice blog which says that the first statement is true. but if you check react docs about useCallback hook you will see it written that react useCallback uses memorized call which means returning the cached result when the same inputs occur again, so maybe I don't get somethings, which of them is correct?

• javascript
• reactjs
• performance

Share Improve this question Follow asked Jun 10, 2020 at 13:06 Eliav LouskiEliav Louski 5,27455 gold badges3636 silver badges7373 bronze badges 5

• 1 If the function doesn't depend on any variables you should move it out of the ponent. – Alexey Lebedev Commented Jun 10, 2020 at 13:12
• 1 The function is always allocated, but useCallback will discard it and return the old function if the dependencies didn't change. This makes a difference in performance when you're passing this function further down to a memoized ponent. – Alexey Lebedev Commented Jun 10, 2020 at 13:14
• at depends on other setState hook functions. – Eliav Louski Commented Jun 10, 2020 at 13:15
• called you please refer to some documentation that will validate you answer? – Eliav Louski Commented Jun 10, 2020 at 13:18
• Does this answer your question? React hook useCallback without dependencies – Nicolas Bouvrette Commented Sep 13, 2022 at 15:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

Everytime your ponent re-render, a new instance of the function is created, useCallback is just an addition which assigns the reference to another variable.

The original function is recreated regardless of whether you use useCallback or not.

Also with the usage of useCallback react actually memoizes the function passed as argument to it, and returns the same reference of the function on next re-render if the dependency didn't change.

Also note that if you use a useCallback function it optimizes re-renders for the child ponents too if you pass the function as prop to child ponent.

So using a useCallback hook is optimal when you pass on the function to child ponents or use it as dependency to useEffect or other functions called with useCallback

Check the docs for more details.

Returns a memoized callback.

Pass an inline callback and an array of dependencies. useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child ponents that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).

useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

本文标签：