useIntersection reporting stale result when element gets reordered

[jemerald]

What is the current behavior?

When element is reodered in a list, the useIntersection` hook would sometimes report no intersection even when the element is in view both before and after the reorder.

Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-use. Paste the link to your JSFiddle or CodeSandbox example below:

https://stackblitz.com/edit/react-ts-7p4uqz

Initially

After shuffle

What is the expected behavior?

A little about versions:

• OS: Windows
• Browser (vendor and version): Chrome latest
• React: 18.0.17
• react-use: 17.4.0
• Did this worked in the previous package version? no

Root cause

The IntersectionObserver callback may contain more than one entry when the element gets moved, but the current implementation only ever uses entries[0], which may not be the latest entry

Proposed fix: https://stackblitz.com/edit/react-ts-7p4uqz?file=NodeWithFixedUseIntersection.tsx

-        setIntersectionObserverEntry(entries[0]);
+        setIntersectionObserverEntry(entries[entries.length - 1]);

[dangoodman]

Run into this issue as well in Chrome on Mac. But Safari works fine. Any news?

MacOS 13.4 Chrome 113.0.5672.126 (Official Build) (arm64) react-use: 17.4.0 React: 18.2.0