[bug]: The result of the interpolation is not applied

[alexfauquette]

Which react-spring target are you using?

• @react-spring/web
• @react-spring/three
• @react-spring/native
• @react-spring/konva
• @react-spring/zdog

What version of react-spring are you using?

9.7.3

What's Wrong?

When updating the interpolator function, the correct function is called, but its result is not applied to the component.

To Reproduce

In the following stackblitz, the toggle button moves the black area from one shape to the other, and during the transition the useEffect will create a rerender that's blocking the animation

The interpolation function does a string interpolation between the current path and the previous one.

When logging the position of the first point in the interpolation result we can see that:

1. The toggle start the animation, moving it from 0 to 300
2. At t=0.6 the rerender is activated by the useEffect. The displayed SVG will stay in this render sate
3. A new interpolation starts from t=0 to t=1 and always returns position 300. But the SVG component will never git this position applied

Screencast.from.24-04-2024.11.00.05.webm

https://stackblitz.com/edit/vitejs-vite-qpxosr?file=src%2FApp.tsx

Expected Behaviour

The interpolation result after the rerender should be applied to the component

Issue faced when working on mui/mui-x#12873

Link to repo

https://stackblitz.com/edit/vitejs-vite-qpxosr?file=src%2FApp.tsx