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)