14islands/r3f-scroll-rig

Passing ref from parent to useTracker fails to detect inViewport

Opened this issue · 1 comments

Seems like there is a race condition with the IntersectionObserver when the ref is defined in the parent component.

For now, make sure you use the useTracker() hook in the same component that collects the ref to be safe.

I think it would be more robust if we changed the interface for useTracker to be something like this:

const [setRef, tracker] = useTracker()

<div ref={setRef}>

I think it could be done in an almost backwards compatible way - we could return the array if the hook is called with no arguments or a config object as the only param. And keep returning the old return value if the first parameter is a DOMRef (the way most people use it today)

Something like this:

// new api
const [setRef, tracker] = useTracker()
const [setRef, tracker] = useTracker({ rootMargin: "100%" })

// old api - backwards compatible
const tracker = useTracker(ref)
const tracker = useTracker(ref, { rootMargin: "100%" })