an issue with rendering 2 examples [useTrail, useSpring] in a page

[zirho]

Hey all,

I was trying to render 2 examples in a page and found that they are not working together.
One of them has infinite loop and it goes crazy ignoring async next callbacks when clicking on the first one triggering re-render.

Go to the page and click the first animation.

https://codesandbox.io/s/weathered-surf-shdc7?file=/src/index.js

you get to see the loop being executed without waiting for the animation to be fished.

How can I make this work?

Thanks!

[zirho]

I found the solution by memoizing the component.

const MemoBg = React.memo(Bg)