Events Dropped

[fabb]

This hook has a major issue in this line:

const [entry] = entries

The browser might defer calling the intersection observer callback when it is busy doing other stuff. In that case, the callback will be called with multiple elements in the entries array. That's why it's an array in the first place.

Here's a related webkit bug report that pinned down a production problem to this browser behavior: https://bugs.chromium.org/p/chromium/issues/detail?id=941681#c7

In order to fix this, you need to do 2 different behaviors, depending on triggerOnce:

const handleIntersect = (entries: IntersectionObserverEntry[]) => {
    if (!intersectObs) return

    if (options.triggerOnce) {
        const firstIntersectingEntry = entries.find(e => e.isIntersecting)

        if (typeof firstIntersectingEntry === 'undefined') {
            setInView(false)
        } else {
            callback?.(firstIntersectingEntry)
            observer.disconnect()
            setInView(true)
        }
    } else {
        // INFO: there might be multiple elements in the entries array when the browser was busy doing other things - in that case, we drop all entries but the last one to avoid unnecessary rerenders (will probably be obsolete when concurrent mode arrives) - client code should not depend on the callback being called for every single entry in this case, rather consider using triggerOnce
        const lastEntry = entries[entries.length - 1]
        callback?.(lastEntry)
        setInView(lastEntry.isIntersecting)
    }
}

The behavior with triggerOnce=false described by the INFO comment is debatable, maybe it makes more sense to execute the callback with all elements of the entries array?

[asyarb]

My current understanding (at least from MDN) is this:

The callback receives as input an array of all of IntersectionObserverEntry objects, one for each threshold which was crossed, and a reference to the IntersectionObserver object itself.

Based off this and since this hook instantiates a new IntersectionObserver per hook, the only situation where entries should contain more than one entry is if the hook is provided an array of thresholds for the threshold option and triggerOnce is false.

Please feel free to correct me if this is incorrect though!

That being said, I totally agree with it being simpler and more flexible to just provide the entire entries array to the callback instead and letting the consumer decide what they ultimately want to do with it.

[asyarb]

Hey @fabb, I've opened #7 which now provides the list of entries to the callback instead. If possible, I'd love to get your feedback on it.

Otherwise, if everything looks good, I'll go ahead and publish the update.

[fabb]

Based off this and since this hook instantiates a new IntersectionObserver per hook, the only situation where entries should contain more than one entry is if the hook is provided an array of thresholds for the threshold option and triggerOnce is false.

This is false. I verified it on Chrome with console logs of the entries array. Happens only when scrolling very quickly, or when using an url #fragment To directly jump down on the page, either in combination with high cpu load. My IntersectionObserver only had 1 threshold. I could not verify it in Firefox though, so MDN might only describe Firefox‘ implementation.