[bug]: in v9.5.1 the first element in useTransition not expiring

[walteh]

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?

v9.5.1

What's Wrong?

I just updated to v9.5.1 and a useTranstion hook that I have been using successfully for the last few months is failing in react-native. I also tested in react for the codesandbox and I am seeing the same result.

Basically the components just pile on top of each other instead of transitioning. Seems like a consistent issue is that the first one that renders never leaves.

I have noticed that sometimes it starts working fine eventually, but always after mount it is failing.

Example:

v9.5.0.mov

v9.5.1.mov

To Reproduce

Please see link below - I hacked together a quick poc using the exact same useTransition logic from my project but simplified everything else.

Apologies about the styling and crappy logic, just trying to boil the issue down.

Expected Behaviour

Only one component shows at a time.

Link to repo

https://codesandbox.io/s/stupefied-rui-zhov18

[joshuaellis]

That's a weird bug. Even weirder it doesn't happen when you attach a springRef.

Thanks for reporting.

[joshuaellis]

@dub6ix, you can see a sandbox with the fix in #1949 here – https://codesandbox.io/s/vigorous-nash-r5791n?file=/src/App.tsx

This is actually the correct behaviour, because you've passed deps to the function, your second argument returned is a SpringRef & all animations should be queued until that ref is started (this is the behaviour across all hooks).

If you remove the deps array from your transition will work as intended, automatically running.

[walteh]

@joshuaellis awesome, this makes sense now! Huge thanks for the clarification and quick response (esp on a Friday). Can confirm this now work in my project at v9.5.1!

Closing as this is the intended behavior.

[joshuaellis]

That's been released on 9.5.2