react-spring icon indicating copy to clipboard operation
react-spring copied to clipboard

Published 20 hours ago • verified publisher icon pmndrs

[bug]: useTransition destroys element too early

Open michalvadak opened this issue 5 months ago • 1 comments

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.

https://github.com/user-attachments/assets/45c38a2b-7fff-4e85-82d8-111361b962b0

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 avatar Jun 04 '25 10:06 michalvadak