title: How do i make react re-render on scroll?
body: <p>My code is meant to activate a process when it scrolls passed a point.</p>
  
  <p>Everything works, but the use effect hook does not activate unless I have state change to cause a re-render. How can I change this so inactivates? When I just had a conditional internal change of the state it was both lag prone and caused a problem with changing to another page. </p>
  
  <pre><code>import React, {useEffect, useRef} from 'react';
  import "./styles.css";
  
  export default function App() {
    let myRef = useRef(null);
  
    useEffect( () =&gt; {
  
      if (window.pageYOffset &gt; myRef.current.offsetTop)
      { console.log("hello friend")
      }
      })
  
    return (
      &lt;div className="App"&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
        &lt;button
          onClick={() =&gt; {
            console.log(myRef.current.offsetTop);
          }}
        &gt;
          {" "}
          test
        &lt;/button&gt;
        &lt;br /&gt;
  
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;div ref={myRef}&gt;
          &lt;h1&gt; hi, this is a test&lt;/h1&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;br /&gt;
   &lt;br /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>here is a code pen with my exact problem.
  <a href="https://codesandbox.io/s/prod-silence-8f07c?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/prod-silence-8f07c?file=/src/App.js</a></p>