title: How to add event listener to a ref?
body: <p>How can I add an event listener to the <strong><code>ref</code></strong> using ReactJS Hooks (version 16.8. +)? </p>
  
  <p>Here is an example where I tried to get the scroll position of certain div with overflow-auto. <strong><code>updateScrollPosition</code></strong> never gets called.</p>
  
  <pre><code>function Example(props) {
      scroller = useRef();    
      useEffect(() =&gt; {
          function updateScrollPosition() {
              // update the scroll position
          }
          if (scroller &amp;&amp; scroller.current) {
              scroller.current.addEventListener("scroll", updateScrollPosition, false);
              return function cleanup() {
                   scroller.current.removeEventListener("scroll", updateScrollPosition, false);
              };
          }
      });
      return (
          &lt;div ref={scroller}&gt;
              &lt;div className="overflow-auto"&gt;
                  some text
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>I appreciate your help</p>