[bug]: useTransition destroys element too early

[michalvadak]

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?

10.0.1

What's Wrong?

The useTransition sometimes destroys the element before calling transitionApi.start() resulting in the animation not playing as the element has been destroyed. Video evidence is attached below.

Zaznam.obrazovky.2025-06-04.v.12.11.02.mov

Also, the use of the useTransition function is problematic when using a spring ref and switching the state from empty array to array of data. The elements are then mounted in the DOM without waiting for the transitionApi.start() (just the animation is waiting).

To Reproduce

1. Setup useTransition with the spring ref
2. Change the state that's in useTransition
3. Call the transitionApi.start()
4. Repeat until it breaks

Expected Behaviour

The useTransition should wait for the transitionApi.start() call to mount/unmount the component.

Link to repo

https://stackblitz.com/edit/vitejs-vite-yuqpbeeh

[michalvadak]

Seems like changing the state of useTransition to "mounted" in the middle of running the "unmounted" transitionApi.start() will result in unmounting after the transitionApi.start() finishes.

Reproduction: https://stackblitz.com/edit/vitejs-vite-j2v2gwrj?file=src%2FCoverUp.tsx

Zaznam.obrazovky.2025-06-07.v.15.11.07.mov