How to use @react-hook/throttle - 5 common examples

const useSizeHook = (dim, initialValue, opt) => {
  const {fps, leading} = opt
  const [size, setThrottledSize] = useThrottle(
    typeof document === 'undefined'
      ? initialValue
      : document.documentElement[dim],
    fps,
    leading
  )

  useEffect(() => {
    const setSize = () => setThrottledSize(document.documentElement[dim])
    window.addEventListener('resize', setSize)
    window.addEventListener('orientationchange', setSize)

    return () => {
      window.removeEventListener('resize', setSize)
      window.removeEventListener('orientationchange', setSize)
    }

const useSizeHook = (
  dim: Dimension,
  initialValue?: number,
  options: ThrottleOptions = emptyObj
): number => {
  const {fps, leading} = options
  const [size, setThrottledSize] = useThrottle(
    typeof document === 'undefined'
      ? initialValue
      : document.documentElement[dim],
    fps,
    leading
  )

  useEffect(() => {
    const setSize = (): void => setThrottledSize(document.documentElement[dim])
    window.addEventListener('resize', setSize)
    window.addEventListener('orientationchange', setSize)

    return (): void => {
      window.removeEventListener('resize', setSize)
      window.removeEventListener('orientationchange', setSize)
    }

y: pageY - rect.top - window.pageYOffset,
        pageX,
        pageY,
        clientX,
        clientY,
        screenX,
        screenY,
        elementWidth: rect.width,
        elementHeight: rect.height,
        isOver: true
      })
    },
    emptyArr
  )

  const onMove = useThrottleCallback(_onMove, fps, true)
  const onEnter = useCallback(
    e => delay(
      enterDelay,
      () => {
        entered.current = true
        onMove(e)
      }
    ),
    [enterDelay, delay]
  )

  const onLeave = useCallback(
    () => delay(
      leaveDelay,
      () => {
        entered.current = false

pageX,
        pageY,
        clientX,
        clientY,
        screenX,
        screenY,
        elementWidth: rect.width,
        elementHeight: rect.height,
        isOver: true,
        isDown: prev.isDown,
      }))
    },
    [element]
  )

  const onMove = useThrottleCallback(onMove_, fps, true)

  useEffect((): void | (() => void) => {
    if (element !== null) {
      const onEnter = (e: MouseEvent): void => {
        delay(enterDelay, (): void => {
          entered.current = true
          onMove(e)
        })
      }
      const onLeave = (): void => {
        delay(leaveDelay, (): void => {
          entered.current = false
          setState(initialState)
        })
      }
      const onDown = (): void => {

export const useWindowScroll = (fps = 30): number => {
  const [scrollY, setThrottledScroll] = useThrottle(
    typeof window === 'undefined' ? 0 : getScrollY,
    fps,
    true
  )

  useEffect(() => {
    const handleScroll = (): void => setThrottledScroll(getScrollY())
    window.addEventListener('scroll', handleScroll)
    return (): void => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, emptyArr)

  return scrollY
}