title: useEffect triggers everything
body: <p>Hi just trying to learn about hooks inside a Next.JS project. Have implemented a useEffect to listen for scrolling behavior with the goal of displaying different content in a header is the page is scrolled.</p>
  <pre><code>const [ scrollY, setScrollY ] = useState(0);
  
  useEffect(() =&gt; {
          const handleScroll = () =&gt; {
              setScrollY(window.scrollY);
          };
          handleScroll();
          
          window.addEventListener(&quot;scroll&quot;, handleScroll);
          return () =&gt; {
              window.removeEventListener(&quot;scroll&quot;, handleScroll);
          };
      }, []);
  </code></pre>
  <p>Then i just have something like</p>
  <p><code>&lt;div className={scrollY &gt; 20 ? 'scrolled': null}&gt;</code></p>
  <p>This works for its purpose but an unintended effect is that scrolling is now additionally triggering everything in the component, so for example if I have console.logs outwith the useEffect they would get triggered on every scroll of the page.  Is it possible to have my UE purely update the scrollY state?</p>
  <p>Example of an issue would be:</p>
  <pre><code>const [ scrollY, setScrollY ] = useState(0);
  const test = &quot;test&quot;;
  console.log(test);
  
  useEffect(() =&gt; {
          const handleScroll = () =&gt; {
              setScrollY(window.scrollY);
          };
          handleScroll();
          
          window.addEventListener(&quot;scroll&quot;, handleScroll);
          return () =&gt; {
              window.removeEventListener(&quot;scroll&quot;, handleScroll);
          };
      }, []);
  </code></pre>
  <p>Test would be logged repeatedly on every scroll.</p>