title: React Hooks: State always setting back to initial value
body: <p>Switching over to react hooks and using them for the first time. My state always seems to be set back to the initial value I pass it (0). Code is to have a page automatically scroll down and up. The page is just practice to displaying various file types. What happens is the scrollDir variable will switch to being set to either 1 or -1 and 0. So the console will display 1,0,1,0,1,0,1,0 etc... How do I get the state to stay during an update? </p>
  
  <pre><code>function App(props) {
  
    const [scrollDir, setScrollDir] = useState(0);
  
    function scrollDown() {
      if(document.documentElement.scrollTop &lt; 10)
      {
        setScrollDir(1);
      }
      else if(document.documentElement.scrollTop &gt;= document.documentElement.scrollHeight - window.innerHeight)
      {
        setScrollDir(-1);
      }
  
      window.scrollBy(0, scrollDir);
    }
  
    useEffect(() =&gt; {
      setInterval(scrollDown, 100);
    });
  
    return (
      &lt;StackGrid monitorImagesLoaded={true} columnWidth={"33.33%"} &gt;
        &lt;img src={posterPNG} /&gt;
        &lt;img src={posterJPG} /&gt;
        &lt;img src={posterGIF} /&gt;
        &lt;video src={posterMP4} loop autoPlay muted /&gt;
        &lt;Document file={posterPDF}&gt;
          &lt;Page pageNumber={1} /&gt;
        &lt;/Document&gt;
      &lt;/StackGrid&gt;
    );
  }
  </code></pre>