title: Avoid re-render with `useCallback`
body: <p>I am trying to figure out why when I click on a specific component its sibling it will render too</p>
  <pre><code>function CountButton({increment, count, number}) {
    console.log(`Render CountButton ${number}`)
  
    return &lt;button onClick={() =&gt; increment(count + 1)}&gt;{count}&lt;/button&gt;
  }
  
  function DualCounter() {
    const [count1, setCount1] = React.useState(0)
    const increment1 = React.useCallback(() =&gt; setCount1(c =&gt; c + 1), [])
    const [count2, setCount2] = React.useState(0)
    const increment2 = React.useCallback(() =&gt; setCount2(c =&gt; c + 1), [])
    console.log('Render DualCounter')
  
    return (
      &lt;&gt;
        &lt;CountButton count={count1} increment={increment1} number={1} /&gt;
        &lt;CountButton count={count2} increment={increment2} number={2} /&gt;
      &lt;/&gt;
    )
  }
  </code></pre>
  <p>I use <code>useCallback</code> and I pass theses function to use avoid that in any render the functions reference will be a different reference.</p>