title: IntersectionObserver with React & Hooks
body: <p>I'm trying to track element visibility with React/Hooks and the Intersection Observer API. However, I can't figure out how to set up observation with "useEffect". Does anybody have any idea how could I do that? Mine solution does not work...</p>
  
  <pre><code>function MainProvider({ children }) {
    const [targetToObserve, setTargetToObserve] = useState([]);
  
    window.addEventListener("load", () =&gt; {
      const findTarget = document.querySelector("#thirdItem");
      setTargetToObserve([findTarget]);
    });
  
    useEffect(() =&gt; {
      const observer = new IntersectionObserver(
        ([entry]) =&gt; {
          if (entry.intersectionRatio === 0.1) {
            console.log("It works!");
          }
        },
        {
          root: null,
          rootMargin: "0px",
          threshold: 0.1
        }
      );
      if (targetToObserve.current) {
        observer.observe(targetToObserve.current);
      }
    }, []);
  
    return (
      &lt;main&gt;
       &lt;div className="Section-item" id="firstItem"&gt;&lt;/div&gt;
       &lt;div className="Section-item" id="secondItem"&gt;&lt;/div&gt;
       &lt;div className="Section-item" id="thirdItem"&gt;&lt;/div&gt;
      &lt;/main&gt;
    );
  }
  </code></pre>