title: Detect scroll direction in React js
body: <p>I'm trying to detect if the scroll event is up or down but I can't find the solution.</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  
  const Navbar = ({ className }) =&gt; {
    const [y, setY] = useState(0);
  
    const handleNavigation = (e) =&gt; {
      const window = e.currentTarget;
      if (y &gt; window.scrollY) {
        console.log(&quot;scrolling up&quot;);
      } else if (y &lt; window.scrollY) {
        console.log(&quot;scrolling down&quot;);
      }
      setY(window.scrollY);
    };
  
    useEffect(() =&gt; {
      setY(window.scrollY);
  
      window.addEventListener(&quot;scroll&quot;, (e) =&gt; handleNavigation(e));
    }, []);
  
    return (
      &lt;nav className={className}&gt;
        &lt;p&gt;
          &lt;i className=&quot;fas fa-pizza-slice&quot;&gt;&lt;/i&gt;Food finder
        &lt;/p&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;Link to=&quot;/about&quot;&gt;About&lt;/Link&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    );
  };
  
  export default Navbar;
  </code></pre>
  <p>Basically it's always detected as &quot;down&quot; because <code>y</code> in <code>handleNavigation</code> is always 0. If i check the state in DevTool the <code>y</code> state updates but in the <code>handleNavigation</code>  doesn't.</p>
  <p>Any suggestions what am I doing wrong?</p>
  <p>Thanks for your help</p>