title: Why intersection observer triggers on component mount?
body: <p>Following is the sample example I was trying to understand intersection observer:</p>
  
  <pre><code>function Test(props) {
    const loadingRef = useRef(null);
    useEffect(() =&gt; {
      let options = {
        root: null,
        rootMargin: '0px',
        threshold: 1.0
      }
      let observer = new IntersectionObserver(handleIntersection, options);
      observer.observe(loadingRef.current)
    }, [])
  
    function handleIntersection(x, y) {
      console.log("Why this triggers on component mount?");
    }
    return (
      &lt;div&gt;
        &lt;div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}&gt;&lt;/div&gt;
        &lt;div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}&gt;&lt;/div&gt;
        &lt;div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}&gt;&lt;/div&gt;
        &lt;div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}&gt;&lt;/div&gt;
        &lt;div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}&gt;&lt;/div&gt;
        &lt;div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}&gt;&lt;/div&gt;
        &lt;div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}&gt;&lt;/div&gt;
        &lt;div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}&gt;&lt;/div&gt;
        &lt;div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}&gt;&lt;/div&gt;
        &lt;div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}&gt;&lt;/div&gt;
        &lt;div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}&gt;&lt;/div&gt;
        &lt;div ref={loadingRef}&gt;&lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>I can't understand as to why this triggers on component mount even when target element doesn't intersect with the source element.</p>