Calling setState when IntersectionObserver threshold is reached?

Question

I'm using react-spring and IntersectionObserver to animate some div elements on my page.

For the IntersectionObserver, I am using a hook given by the tutorial here.

CodeSandbox

While I am able to get the div to rotate by itself (onClick), and the useIntersect working - I am unable to trigger the rotation when the a section appears. I have tried using setState, the same way I do for onClick, but this does not work since the entry.isIntersecting property triggers multiple time during each rerender.

How can I get a div to rotate using react-spring when an IntersectionObserver threshold is met?

Answer 1

You might add a callback parameter to the useIntersect. And call it when you update the entry. But it did not work for me, because the callback is invoked in every render, and you want to trigger a render in your callback. So it caused me an infinite loop. So I suggest to use something else.

I use usually react-waypoint for this purpose. Its use is straightforward.

  <GenerateSection />
  <Waypoint
    onEnter={() => set((flipped) => !flipped)}
    onLeave={() => console.log('leave')}
  />
  <GenerateSection />

If you wanted to use useIntersect just for trigger the animation then you can remove it as it is unneccessary.

https://codesandbox.io/s/hopeful-dhawan-nr5np?file=/src/App.js