63Implement useIntersectionObserver() for lazy loading

Implement useIntersectionObserver({ root = null, rootMargin = "0px", threshold = 0, freezeOnceVisible = false } = {}). It returns [ref, isIntersecting]:

• ref is a callback ref to attach to the element to watch;
• isIntersecting is true while the element is visible (according to the options).

With freezeOnceVisible: true, the hook stops observing after the element first becomes visible and stays true. That is exactly what lazy loading needs.

Then build LazyImage({ src, alt }): it renders an <img> without a src until it is about to scroll into view (use rootMargin: "200px"), then sets src.

function Gallery({ photos }) {
  return photos.map((p) => <LazyImage key={p.id} src={p.url} alt={p.title} />);
}

Requirements

• Use one IntersectionObserver per hook instance and disconnect it on unmount.
• Support the watched element changing (that is why ref is a callback ref).
• Recreate the observer when the options change.