title: React hooks useState not updating with onChange
body: <p>UPDATED QUESTION:</p>
  
  <p>If I type something in the input field before I scroll the <code>expanded</code> prop gets set to true - correct </p>
  
  <p>If I scroll down - expanded gets set to false - correct</p>
  
  <p>If I type something in the input field now <code>expanded</code> is still <code>false</code> - I expect <code>expanded</code> to be set to <code>true</code> again.</p>
  
  <p>code:</p>
  
  <pre><code>export default () =&gt; {
  
  const [expanded, setExpanded] = useState(true)
  
  let searchInput = React.createRef()
  let scrollTopValue = 0;
  
  function handleSearchInput() {
      console.log(Boolean(searchInput.current.value.length))
      setExpanded(Boolean(searchInput.current.value.length)) // first time true, don't get re triggered
  
  }
  
  useEffect(() =&gt; {
      window.addEventListener('scroll', handleScroll)
      return () =&gt; window.removeEventListener('scroll', handleScroll)
  }, []);
  
  function handleScroll() {
      setExpanded(scrollTopValue &gt; document.documentElement.scrollTop)
      scrollTopValue =  document.documentElement.scrollTop
  }
  
  return (
  &lt;header&gt;
     {expanded? 'expanded': 'nope'}
      &lt;input role="search" ref={searchInput} onChange={handleSearchInput}&gt;&lt;/input&gt;
  
  &lt;/header&gt;)
  }
  </code></pre>