title: Using React Hooks To Update w/ Scroll
body: <p>I'm trying to control the visibility of a React Component based on whether an individual is scrolling down on the component. The visibility is passed into the <code>Fade</code> element as the "in" property.</p>
  
  <p>I've set up a listener using the UseEffect Hook, which adds the listener onMount. The actual onScroll function is supposed to update the scrollTop state (which is the current value of the height to the top of the page) and then the scrolling state (which compares the event's scroll to the top of the page with the previous state, and if the first is greater than the second, returns true).</p>
  
  <p>However, for some reason the setScrollTop hook isn't working, and the scrolling state continues to stay at 0.</p>
  
  <p>What am I doing wrong? Here's the full component:</p>
  
  <pre><code>export const Header = (props) =&gt; {
  
    const classes = useStyles();
  
    const [scrolling, setScrolling] = useState(false);
    const [scrollTop, setScrollTop] = useState(0);
  
    const onScroll = (e) =&gt; {
      setScrollTop(e.target.documentElement.scrollTop);
      setScrolling(e.target.documentElement.scrollTop &gt; scrollTop);
    }
  
    useEffect(() =&gt; {
      window.addEventListener('scroll', onScroll);
    },[]);
  
    useEffect(() =&gt; {
      console.log(scrollTop);
    }, [scrollTop])
  
    return (
     &lt;Fade in={!scrolling}&gt;
        &lt;AppBar className={classes.header} position="fixed"&gt;
  
    ....
  </code></pre>