title: React useCallback with Parameter
body: <p>Using React's <code>useCallback</code> hook is essentially just a wrapper around <code>useMemo</code> specialized for functions to avoid constantly creating new function instances within components' props. My question comes from when you need to pass an argued to the callback created from the memoization.</p>
  
  <p>For instance, a callback created like so...</p>
  
  <pre><code>const Button: React.FunctionComponent = props =&gt; {
      const onClick = React.useCallback(() =&gt; alert('Clicked!'), [])
      return &lt;button onClick={onClick}&gt;{props.children}&lt;/button&gt;
  }
  </code></pre>
  
  <p>is a simple example of a memoized callback and required no external values passed into it in order to accomplish its job. However, if I want to create a generic memoized callback for a <code>React.Dipatch&lt;React.SetStateAction&gt;</code> function type, then it would require arguments...for example:</p>
  
  <pre><code>const Button: React.FunctionComponent = props =&gt; {
      const [loading, setLoading] = React.useState(false)
      const genericSetLoadingCb = React.useCallback((x: boolean) =&gt; () =&gt; setLoading(x), [])
  
      return &lt;button onClick={genericSetLoadingCb(!loading)}&gt;{props.children}&lt;/button&gt;
  }
  </code></pre>
  
  <p>In my head, this seems like its the exact same as doing the following...</p>
  
  <pre><code>const Button: React.FunctionComponent = props =&gt; {
      const [loading, setLoading] = React.useState(false)
      return &lt;button onClick={() =&gt; setLoading(!loading)}&gt;{props.children}&lt;/button&gt;
  }
  </code></pre>
  
  <p>which would let defeat the purpose of memoizing the function because it would still be creating a new function on every render since <code>genericSetLoadingCb(false)</code> would just be returning a new function on each render as well.</p>
  
  <p>Is this understanding correct, or does the pattern described with arguments still maintain the benefits of memoization?</p>