useIntersectionObserver

See source on Github 

Registers an IntersectionObserver on ref and executes callback when the observed element intersects with the root element.

• @param ref - A RefObject of the element to observe.
• @param callback - A function to execute when the observed element intersection changes.
• @param options - Configurable options
• @param options.when - Whether observation is enabled.
• @param options.once - Whether to stop after the first intersection.
• @param options.root - Element used as the intersection viewport.
• @param options.rootMargin - Margin applied around the root.
• @param options.threshold - Intersection ratios that trigger the callback.
• @returns void

Example

const ref = useRef<HTMLSpanElement>(null);
const [shouldLoadImage, setShouldLoadImage] = useState(false);
 
useIntersectionObserver(ref, (entry) => {
  setShouldLoadImage(entry.isIntersecting);
}, { once: true })