useScrollThreshold: A hook to tell whether you’ve scrolled past a certain point

Often I need to know whether a user has scrolled past a certain pixel threshold value, for example to affix a header, or hide/show some elements. There is of course react-intersection-observer, but often that feels overblown and sometimes I just don’t want to add another external dependency. For these cases I created this tiny hook:

import React from "react";

export const useScrollThreshold = (threshold) => {
  const [isScrolled, setIsScrolled] = React.useState(false);

  const handleScroll = React.useCallback(() => {
    const scrollTop = window.pageYOffset ?? document.documentElement.scrollTop;
    if (scrollTop > threshold && !isScrolled) {
      setIsScrolled(true);
    }
    if (scrollTop <= threshold && isScrolled) {
      setIsScrolled(false);
    }
  }, [isScrolled, threshold]);

  React.useEffect(() => {
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, [handleScroll]);

  return isScrolled;
};

Usage is as easy as:

const hasScrolledPast = useScrollThreshold(72);