javascript - react-three-fiber + react-spring desync?

Question

I am trying to do a simple animation with react-three-fiber and react-spring where there are a bunch of 3d objects in a grid, and each one scales up when hovered/selected and back to normal when it is not hovered/selected. This was working when I was just setting the mesh scale to the min or max value on the corresponding interactions.

When I implemented spring, the values started to desync from what they should be. If you quickly mouse over the boxes in the example below you will see what I mean.

https://codesandbox.io/s/r3f-rs-bug-zrlvd

I am very new to the react ecosystem so I am hoping that I am just doing something wrong, but when I compare my setup to a working example, I can't figure out what I could be doing incorrectly.

Working mouse over script: https://codesandbox.io/s/9y8vkjykyy

I could just create my own tween system that eases between the values but I would love to get react-spring to play nicely.

Any input would be appreciated

question from:https://stackoverflow.com/questions/66051918/react-three-fiber-react-spring-desync

Answer 1

This was a confirmed bug in react-spring. It is fixed in v9