title: React hooks callback receives outdated state
body: <p>Trying out react hooks on a simple search component. The idea is simple: user types symbols, every typed symbol initiates api query.<br>
  To achieve that I have <code>useState</code> and <code>useCallback</code> hooks like in the code below:</p>
  
  <pre><code>
  const Search = () =&gt; {
    const [query, setQuery] = useState("");
    const sendRequest = useCallback(() =&gt; {
      console.log('sendRequest ', query);
    }, [query]);
  
    return (
      &lt;div&gt;
        &lt;input
          type="text"
          value={query}
          placeholder="Search"
          onChange={e =&gt; {
            console.log('onChange ', e.target.value);
            setQuery(e.target.value);
            sendRequest();
          }}
        /&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>The result is that <code>sendRequest</code> method always gets a previous version of <code>query</code>.</p>
  
  <pre><code>onChange q
  sendRequest 
  onChange qu
  sendRequest q
  onChange que
  sendRequest qu
  </code></pre>
  
  <p>Why is that? I assume that this is not how the hooks are supposed to be used, but I can't figure that out from the <a href="https://reactjs.org/docs/hooks-intro.html" rel="nofollow noreferrer">documentation</a>.</p>