title: useCallback onChange always shows previous values
body: <p>I have 30 inputs</p>
  <p>and i want to auto/manual fire httprequests on text change</p>
  <p>but somehow <code>useCallback</code> prints previous values</p>
  <p>I want to use <code>useCallback</code> as I want to keep same function reference when it is deeply passed to component,and avoids re-renders</p>
  <p><a href="https://codesandbox.io/s/dank-sun-h68kk?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit dank-sun-h68kk" /></a></p>
  <pre class="lang-js prettyprint-override"><code>    import React, { useState, useCallback } from &quot;react&quot;;
      
      export default function App() {
        const [name, setName] = useState(&quot;tom&quot;);
        const verifyName = useCallback(() =&gt; {
          console.log(`HttpRequest for name ${name}`);
        }, [name]);
       
        return (
          &lt;div&gt;
            Name &lt;input value={name} onChange={(e) =&gt; {
                setName(e.target.value);
                verifyName();
              }}
            /&gt; 
            &lt;button onClick={verifyName}&gt; check name &lt;/button&gt;
  
          &lt;/div&gt;
        );
      }
  </code></pre>
  <p><a href="https://codesandbox.io/s/dank-sun-h68kk?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit dank-sun-h68kk" /></a></p>