title: react-spring and react-intersection-observer - tons of rerenders
body: <p><a href="https://codesandbox.io/s/frosty-stallman-shbsy?file=/src/App.js" rel="nofollow noreferrer">JSFiddle</a></p>
  <p>Code:</p>
  <pre><code>export default function App() {
    const spring = useSpring({ from: { opacity: 0 }, to: { opacity: 1 } });
  
    const [ref] = useInView();
  
    rerenders++;
    return (
      &lt;div style={{ height: &quot;200vh&quot; }}&gt;
        &lt;div style={{ height: &quot;150vh&quot; }}&gt;&lt;/div&gt;
        &lt;animated.div
          ref={ref}
          style={{
            height: &quot;50px&quot;,
            width: &quot;50px&quot;,
            backgroundColor: &quot;red&quot;,
            opacity: spring.opacity
          }}
        &gt;
          Hello!
        &lt;/animated.div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>Attaching <code>useInView</code>'s <code>ref</code> (a hook from <code>react-intersection-observer</code>) causes constant rerendering of the component. Why is that so?</p>
  <p>Using an IntersectionObserver yourself does not do such a thing:</p>
  <pre><code>  const ref = useRef&lt;any&gt;();
    
    useLayoutEffect(() =&gt; {
      const obs = new IntersectionObserver((entries, observer) =&gt; {
        entries.forEach((entry, index) =&gt; {
          console.log(entry);
        });
      });
      obs.observe(ref.current);
    }, []);
  </code></pre>