Should we use useCallback in every function handler in React Functional Components

Question

let's say we have the components like this

const Example = () => {
  const [counter, setCounter] = useState(0);
  
  const increment = () => setCounter(counter => counter + 1); 
  return (
    <div>
      <Button onClick={increment} />
      
      <div>{counter}</div>
    </div>
  );
}

When I passed the onClick handler as an arrow function, my eslint throw a warning:

error    JSX props should not use arrow functions        react/jsx-no-bind

As I read from an answer from this post: https://stackoverflow.com/questions/36677733/why-shouldnt-jsx-props-use-arrow-functions-or-bind#:~:text=Why%20you%20shouldn't%20use,previous%20function%20is%20garbage%20collected.

The short answer is because arrow function is recreated every time, which will hurt the performance. One solution proposed from this post is to wrapped in a useCallback hook, with empty array. And when I change to this, the eslint warning really disappear.

const Example = () => {
  const [counter, setCounter] = useState(0);
  
  const increment = useCallback(() => setCounter(counter => counter + 1), []);
  
  return (
    <div>
      <Button onClick={increment} />
      
      <div>{counter}</div>
    </div>
  );
}

However, there is also another opinion saying that overusing useCallback will eventually slowdown the performance due to the overheads of useCallback. One example is here: https://kentcdodds.com/blog/usememo-and-usecallback

This is making me really confused? So for Functional Components, when dealing with inline function handler, should I just write the arrow function (ignore the eslint) or always wrap it in a useCallback ???

Answer 1

The short answer is because arrow function is recreated every time, which will hurt the performance.

This is a common misconception. The arrow function is recreated every time either way (although with useCallback subsequent ones may be thrown away immediately). What useCallback does is make it possible for the child component you use the callback on to not re-render if it's memoized.

Let's look at the misconception first. Consider the useCallback call:

const increment = useCallback(() => setCounter(counter => counter + 1), []);

That's executed like this:

1. Evaluate the first argument, () => setCounter(counter => counter + 1) , creating a function

2. Evaluate the second argument, [] , creating an array

3. Call useCallback with those two arguments, get back a function

Compare with what you have if you don't use useCallback :

const increment = () => setCounter(counter => counter + 1);

That's much simpler: Create the function. It doesn't then have to do #2 and #3 above.

Let's move on to what useCallback actually does that's useful. Let's look at where the callback is used:

<Button onClick={increment} />

Now, suppose Button is memoized with React.memo or similar. If increment changes every time your component renders, then Button has to re-render every time your component changes; it can't be reused between renders. But if increment is stable between renders (because you used useCallback with an empty array), the memoized result of calling Button can be reused, it doesn't have to be called again.

Here's an example:

 const { useState, useCallback } = React; const Button = React.memo(function Button({onClick, children}) { console.log("Button called"); return <button onClick={onClick}>{children}</button>; }); function ComponentA() { console.log("ComponentA called"); const [count, setCount] = useState(0); // Note: Safe to use the closed-over `count` here if `count `updates are // triggered by clicks or similar events that definitely render, since // the `count` that `increment` closes over won't be stale. const increment = () => setCount(count + 1); return ( <div> {count} <Button onClick={increment}>+</Button> </div> ); } function ComponentB() { console.log("ComponentB called"); const [count, setCount] = useState(0); // Note: Can't use `count` in `increment`, need the callback form because // the `count` the first `increment` closes over *will* be slate after // the next render const increment = useCallback( () => setCount(count => count + 1), [] ); return ( <div> {count} <Button onClick={increment}>+</Button> </div> ); } ReactDOM.render( <div> A: <ComponentA /> B: <ComponentB /> </div>, document.getElementById("root") );

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>

Note that clicking the button in ComponentA always calls Button again, but clicking the button in ComponentB doesn't.

When do you want to do that? That's largely up to you, but it probably makes sense when your component's state will change frequently in ways that don't affect the contents of increment and thus don't affect Button and if Button has to do significant work when rendered. Button probably doesn't, but other child components may.

For instance, the useCallback in my previous example is probably pointless if you use count as the text of the button, since that means Button has to re-render regardless:

 const { useState, useCallback } = React; const Button = React.memo(function Button({onClick, children}) { console.log("Button called"); return <button onClick={onClick}>{children}</button>; }); function ComponentA() { console.log("ComponentA called"); const [count, setCount] = useState(0); // Note: Safe to use the closed-over `count` here if `count `updates are // triggered by clicks or similar events that definitely render, since // the `count` that `increment` closes over won't be stale. const increment = () => setCount(count + 1); return ( <div> <Button onClick={increment}>{count}</Button> </div> ); } function ComponentB() { console.log("ComponentB called"); const [count, setCount] = useState(0); // Note: Can't use `count` in `increment`, need the callback form because // the `count` the first `increment` closes over *will* be slate after // the next render const increment = useCallback( () => setCount(count => count + 1), [] ); return ( <div> <Button onClick={increment}>{count}</Button> </div> ); } ReactDOM.render( <div> A: <ComponentA /> B: <ComponentB /> </div>, document.getElementById("root") );

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>

Also note that useCallback isn't free, it impacts the code in the callback. Look at the code in the callbacks in ComponentA and ComponentB in the examples. ComponentA (which doesn't use useCallback ) can use the value of count that it closes over (within limits!), () => setCount(count + 1) . But the one in ComponentB always has to use the callback form of the setter, () => setCount(count => count + 1) . That's because if you keep using the first increment you create, the count it closes over will be stale — you'd see the count go to 1, but never further.

Answer 2

In my opinion, useCallback is not for performance. I cannot think of any reason that defining a function is really expensive. Unlike useMemo , useCallback just memoize the function and does not actually execute it.

So when should we use it?

The main reason is to prevent re-running a function unnecessarily. Redefining a function is not problematic, but re-running it on every state update is buggy and often dangerous.

TL DR; Only use useCallback when the function needs to be inside dependency array of useEffect

There are two cases I can think of right now:

1. For example, a function is async, and we need to run it when any of dependency has been changed:

const [data, setData] = useState([]);
const [filter, setFilter] = useState({});

const fetchData = useCallback(async () => {
  const response = await fetchApi(filter);
  setData(response.data);
}, [filter]);

useEffect(() => {
  fetchData();
}, [fetchData]);

(If the function is not async, we may use useEffect directly without using useCallback )

However, no need to wrap it with useCallback when it is only run by user interaction:

const [data, setData] = useState([]);
const [filter, setFilter] = useState({});

const fetchData = async () => {
  const response = await fetchApi(filter);
  setData(response.data);
};

return (
  <button onClick={fetchData}>Fetch Data</button>
);

2. When you should pass a function prop to 3rd-party component:

const onAwesomeLibarayLoaded = useCallback(() => {
  doSomething(state1, state2);
}, [state1, state2]);

<AwesomeLibrary 
  onLoad={onAwesomeLibarayLoaded}
/>

Because AwesomeLibrary component might do something like example 1 with passed onLoad function:

const AwesomeLibarary = ({onLoad}) => {
  useEffect(() => {
    // do something
    onLoad();
  }, [onLoad]);
};

If you're sure it is not inside useEffect then it is OK even if you don't use useCallback .