Continuous state updates with react-merge-refs

If I understand correctly, the useInView hook changes state — causing its parent component to render — when there is any change to the intersection entry. This can be a lot (e.g. while scrolling) and in some applications (e.g. WebGL rendered at 60fps, see https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls) that is a substantial performance hit. For my application, I only need to make changes when boolean visibility changes from true to false or false to true, and the fractional state changes beyond that cause overhead. Is this an option that could be provided?

[thebuilder]

See the FAQ: https://github.com/thebuilder/react-intersection-observer#how-can-i-assign-multiple-refs-to-a-component

react-merge-refs has an open issue for the behavior you are seeing: https://github.com/gregberge/react-merge-refs/issues/5

[donmccurdy]

Here’s a simplified case reproducing the issue:

https://codesandbox.io/s/continuous-intersection-repro-o9ws74?file=/src/index.js

Current Behavior:

1. Open sandbox, notice that Renders counter increases continuously.
2. Scroll down to the logo, notice that intersection event fires and font turns red.

Expected Behavior:

1. Same as above, but without continuous rendering.

Other notes:

The problem seems to be related to mixing react-intersection-observer with react-merge-refs. If I remove react-merge-refs — which I’ll look into, but isn’t totally trivial in my real application — there’s no problem. Merging refs seems to be causing the intersection observer to re-bind itself.

The example also includes a handmade useInView hook, which you can uncomment to test. It doesn’t render continuously (✅) and updates on intersection (✅) but doesn’t detect changes to the ref (⚠️).

I’m not sure whether this is a problem in one package or the other, or just a misunderstanding of how react refs work — totally understand if this isn’t within the scope of react-intersection-observer. 🤔