14islands / r3f-scroll-rig

A react-three-fiber scroll-rig for syncing 3D meshes and DOM elements.
MIT License
698 stars 34 forks source link

Passing ref from parent to useTracker fails to detect inViewport #11

Open ffdead opened 1 year ago

ffdead commented 1 year ago

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.

ffdead commented 1 year ago

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%" })