title: Should we use useCallback in every function handler in React Functional Components
body: <p>let's say we have the components like this</p>
  <pre><code>const Example = () =&gt; {
    const [counter, setCounter] = useState(0);
    
    const increment = () =&gt; setCounter(counter =&gt; counter + 1); 
    return (
      &lt;div&gt;
        &lt;Button onClick={increment} /&gt;
        
        &lt;div&gt;{counter}&lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>When I passed the <code>onClick</code> handler as an <strong>arrow function</strong>, my <code>eslint</code> throw a warning:</p>
  <pre><code>error    JSX props should not use arrow functions        react/jsx-no-bind
  </code></pre>
  <p>As I read from an answer from this post: <a href="https://stackoverflow.com/questions/36677733/why-shouldnt-jsx-props-use-arrow-functions-or-bind#:%7E:text=Why%20you%20shouldn%27t%20use,previous%20function%20is%20garbage%20collected">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</a>.</p>
  <p>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 <strong>useCallback</strong> hook, with empty array. And when I change to this, the eslint warning really disappear.</p>
  <pre><code>const Example = () =&gt; {
    const [counter, setCounter] = useState(0);
    
    const increment = useCallback(() =&gt; setCounter(counter =&gt; counter + 1), []);
    
    return (
      &lt;div&gt;
        &lt;Button onClick={increment} /&gt;
        
        &lt;div&gt;{counter}&lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>However, there is also another opinion saying that <strong>overusing</strong> useCallback will eventually slowdown the performance due to the overheads of useCallback. One example is here: <a href="https://kentcdodds.com/blog/usememo-and-usecallback" rel="noreferrer">https://kentcdodds.com/blog/usememo-and-usecallback</a></p>
  <p>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 <strong>always</strong> wrap it in a useCallback ???</p>