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

Question

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?

If the function doesn't depend on any variables you should move it out of the component. — Alexey Lebedev
– Alexey Lebedev, Commented Jun 10, 2020 at 13:12
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 component. — Alexey Lebedev
– Alexey Lebedev, Commented Jun 10, 2020 at 13:14
called you please refer to some documentation that will validate you answer? — Eliav Louski
– Eliav Louski, Commented Jun 10, 2020 at 13:18
Does this answer your question? React hook useCallback without dependencies — Nicolas Bouvrette
– Nicolas Bouvrette, Commented Sep 13, 2022 at 15:43

Shubham Khatri · Accepted Answer · 2020-06-11 11:17:04Z

13

Everytime your component 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 components too if you pass the function as prop to child component.

So using a useCallback hook is optimal when you pass on the function to child components 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 components that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).

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

edited Jun 11, 2020 at 11:17

answered Jun 10, 2020 at 13:14

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

3 Comments

Eliav Louski Over a year ago

thank you for the answer, but this is not quite what I asked.

Shubham Khatri Over a year ago

I updated my answer. Maybe that provides you more insight on what I am trying to say

Eliav Louski Over a year ago

thank you, friend. this is exactly what I've asked. this exactly how Alexey Lebedev said.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related