React hook that triggers one time, when an element becomes visible on the screen

hook.js

//Copied from SO checking if an element is in view
const checkIfInView = (elementPosition, extraOffset) =>
  elementPosition.top >= 0 &&
  elementPosition.left >= 0 &&
  elementPosition.bottom + extraOffset <=
    (window.innerHeight || document.documentElement.clientHeight) &&
  elementPosition.right + extraOffset <=
    (window.innerWidth || document.documentElement.clientWidth);

//React hook that sets state when in view
const useEnteringView = (extraOffset = 0) => {
  const [isEntering, setIsEntering] = useState(false);
  const ref = useRef(null);

  const handleScroll = () => {
    if (!ref.current || isEntering) return;
    let elementPosition = ref.current.getBoundingClientRect();
    let isInView = checkIfInView(elementPosition, extraOffset);

    if (isInView && !isEntering) setIsEntering(true);
  };

  useEffect(() => {
    //Yes this should get debounced :)
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  });

  return { isEntering, ref };
};