useIntersection - Hook to simplify usage of Intersection Observer

useIntersection.ts

import { MutableRefObject, useEffect, useRef, useState } from 'react'

export const useIntersection = (
  ref: MutableRefObject<Element | null>,
  options?: IntersectionObserverInit | null,
  once = false
): boolean => {
  const [isIntersecting, setIsIntersecting] = useState(false)
  const observerRef = useRef<IntersectionObserver | null>(null)
  const optionsRef = useRef<typeof options>()

  if (!isEqual(optionsRef.current, options)) {
    optionsRef.current = options
  }

  const unobserve = () => {
    observerRef.current?.disconnect()
  }

  useEffect(() => {
    const destroy = () => {
      unobserve()
      observerRef.current = null
    }

    observerRef.current = new IntersectionObserver(([entry]) => {
      setIsIntersecting(entry.isIntersecting)
      if (once && entry.isIntersecting) {
        destroy()
      }
    }, optionsRef.current ?? undefined)

    return destroy
  }, [optionsRef.current, once])

  useEffect(() => {
    if (!ref.current) return
    observerRef.current?.observe(ref.current)

    return unobserve
  }, [observerRef.current, ref.current])

  return isIntersecting
}