The listener function is not registered in the functional components

#addeventlistener #react #javascript #reacthooks

react

Using Functional Component, I am trying to find the scroll position of an element, but the listener function isn't registering as scrolling occurs. Can anyone explain why this is happening.

Here is the code for reference

export default function App() {
  const [scrollPosition, setScrollPOsition] = useState(0);
  const innerRef = useRef<HTMLParagraphElement>(null);

  const handleScroll = () => {
    console.log("handle scroll");
    // setScrollPOsition((scrollPosition) => scrollPosition + 1);
  };

  useEffect(() => {
    if (innerRef.current) {
      innerRef.current.addEventListener("scroll", handleScroll);
      return () => innerRef.current?.addEventListener("scroll", handleScroll);
    }
  }, []);

  return (
    <div className="App">
      <span className={"scrollValue"}>
        scroll position of first header: {scrollPosition}
      </span>
      <h1 ref={innerRef}>Find My position on window</h1>
      <h2>Heading Element</h2>
      ...
      ...
      <h2>Heading Element</h2>
    </div>
  );
}

Here is the code sandbox link