[bug]: useTransition breaks in <StrictMode> with React 18

[jamesknelson]

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?

react-spring 9.4.2 (also tested with 9.4.3-beta.0 and 9.3.3)

What's Wrong?

tl;dr, changes to how <StrictMode> work in React 18 seem to have broken useTransition.

When transitioning, the first item's leave transition completes successfully, but the new item never enters. It appears to get stuck in the mount phase.

This is easier to see in practice - the linked CodeSandbox demo is only ~50 lines and shows the problem clearly.

If I had to hazard a guess at what is going on here, it's likely due to the fact that React 18's <StrictMode> now immediately calls the cleanup function of all effects on mount, before calling the effect callbacks a second time.

For example https://github.com/pmndrs/react-spring/blob/master/packages/core/src/hooks/useTransition.tsx#L106 looks like it may break in React 18's StrictMode, as the cleanup function will now be called immediately on mount.

I've had a quick go at fixing this, but wasn't able to get any results in the half-an-hour or so I spent on this. For now, I've disabled StrictMode as a workaround.

To Reproduce

Use useTransition within a component rendered inside a <StrictMode> in React 18 (currently tested with rc.0 and some newest "next" releases).

Expected Behaviour

useTransition should work with <StrictMode> in React 18.

Link to repo

https://codesandbox.io/s/jovial-microservice-n35r6?file=/src/index.js

[joshuaellis]

I've just released 9.4.5-beta.1 that should address this issue, please give it a go and let me know if it solves your issue.

[jafin]

@joshuaellis beta.1 worked here with React 18 strictmode. Thank you!

[morlay]

@joshuaellis With 9.4.5-beta.1, everything works again 🥳 . Thank you!