title: useCallback with args passed in
body: <p>I have a <a href="https://material-ui.com/api/tabs/" rel="nofollow noreferrer"><code>&lt;Tabs /&gt;</code> component</a> in material-ui, that has a handler for changing mode. The on change has this signature (from the link):</p>
  
  <blockquote>
    <p><strong>Signature</strong>:<br>
    <code>function(event: object, value: any) =&gt; void</code><br>
    event: The event source of the callback<br>
    value: We default to the index of the child (number)  </p>
  </blockquote>
  
  <p>My implementation goes a little something like this:</p>
  
  <pre><code>&lt;Tabs
    value={mode}
    onChange={handleChange}
  /&gt;
    &lt;Tab id="choice1" value="one" label="Choice 1" /&gt;
    &lt;Tab id="choice2" value="two" label="Choice 2" /&gt;
  &lt;/Tabs&gt;
  </code></pre>
  
  <p>My <code>handleChange</code> function is just an arrow fn around a useState-like hook</p>
  
  <pre><code>const handleChangeMode = (event, newMode) =&gt; {
    setMode(newMode);
  }
  </code></pre>
  
  <p>In an effort to avoid recreating this arrow fn each time, I've tried to do this:</p>
  
  <pre><code>const handleChangeMode = useCallback((event, newMode) =&gt; {
    setMode(newMode);
  }, [setMode]);
  </code></pre>
  
  <p>but I noticed, that the thing that changes the most, the new mode isn't part of the deps, and thus would perhaps not behave properly? Then I conjured this monstrosity from my darkest dreams:</p>
  
  <pre><code>const handleChangeMode = useCallback((event, newMode) =&gt; {
    useCallback(() =&gt; setMode(newMode), [setMode, newMode])();
  }, [setMode]);
  </code></pre>
  
  <p><strong><em>It's callbacks all the way down.</em></strong></p>
  
  <p>Previously, this question (<a href="https://stackoverflow.com/questions/55006061/react-hooks-usecallback-with-parameters-inside-loop">React hooks useCallback with parameters inside loop</a>) suggested not to use <code>useCallback</code> in that scenario. But as this is something that could be called over and over, it seems like the place to do so. Also the example with <code>useMemo</code> doesn't get around that I want to depend on a variable passed into the hook, which I don't even think works in this example (e.g. I'm using the hook wrong, as well as not knowing how to use it for my example).</p>
  
  <p>How do I get around this issue?</p>
  
  <p>(Edit: in fact, I cannot nest the callback/memo hooks at all. so the last code example doesn't work, as I suspected)</p>