Custom hook using IntersectionObserver

[dmanek]

This PR creates the useIntersectionObserver custom hook which calls a given callback on a given element with the most recent IntersectionObserverEntry received with where that element is a target. A consumer could use it as follows:

const ioCallback = useCallback(({isIntersection}) => {
  if (isIntersecting) {
    // do something;
  }
});
useIntersectionObserver(
  ref, 
  ioCallback,
  toWin(ref.current?.ownerDocument?.defaultView)
);

const [lastEntry, setLastEntry] = useState(null);
useIntersectionObserver(
  ref, 
  setLastEntry,
  toWin(ref.current?.ownerDocument?.defaultView),
);

The current approach is preferred to the following because it may cause extraneous intermediary renders in the consumer:

function useIntersectionObserver(ref, win) {
  const [lastEntry, setLastEntry] = useState(null);
  useEffect(() => {
    io = io ?? new win.IntersectionObserver((entries) => { setLastEntry(entries[entries.length - 1]) }
  }, []);
  return lastEntry;
}

Note the above also has bugs when multiple targets are being observed - the update lastEntry state by the hook would be incorrectly shared by all consumers.

Open questions:

• Do we need to share a unique IntersectionObserver per target window instance, or can a global window suffice? The current approach is to take an optional target window and use the local window relative to the given ref.
• Should we support sharing a unique IntersectionObserver per init options? This can grow rather quickly if there are specific use cases for certain thresholds, but as things are, the only two applications (Timeago and Iframe) do not specify options, so perhaps it's better to support this case once the need arises rather than over-engineer on a hypothetical.

[caroqliu]

Can you please also verify this works for the Timeago component?

[samouri]

quick comment before a full review: given that the win argument is derivable from the ref (first parameter), can we skip providing it and instead have the hook derive it?

[dmanek]

@samouri thanks for the comment - it's one of the open questions (mentioned in the description) we'd like input on. The scenario we thought for allowing a user to specify the win argument is within an iframe where the top level IntersectionObserver may not be what the user needs.

[samouri]

Can we also create unit tests for this hook?

[samouri]

Whoops, had a saved comment that I had never hit submit on 😬

[jridgewell]

Use useCallback to avoid trashing the ref.

[dmanek]

Cant use useCallback outside a component or hook.

[jridgewell]

Let's make it a hook, then. As is, this is going to call each refs every time it renders.

[samouri]

This is a pretty slick* implementation: https://github.com/theKashey/use-callback-ref#usemergerefs

[dmanek]

Merged this PR as it has too many comments as it is. Created #36024 for the custom hook implementation.