[bug]: use transition double render on enter/transition

[goldylucks]

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.5.0

What's Wrong?

1. Onload, the bottom links should render only once, but they are rendered twice.
2. When clicking the box links at the bottom, the current links should smoothly fade out and the new ones fade in.

Instead, the new ones initially fade in stacked with the previous ones.

To Reproduce

https://codesandbox.io/s/competent-blackwell-72jywy?file=/src/DynamicScreen.tsx

1. watch the enter bug (view in full screen to see this)
2. Click on any of the three box links at the bottom and watch the transition bug

Expected Behaviour

Should only render once

Link to repo

https://codesandbox.io/s/competent-blackwell-72jywy?file=/src/DynamicScreen.tsx

[joshuaellis]

Your code repo has a lot of code in it, please boil down the issue into its simplest form so it can easily be looked at. At the moments it's hard to even understand what's going on in the code from a glance.

EDIT: I can't see the problem in the codesandbox either.

[goldylucks]

@joshuaellis cleaned it up

You can see the problem better in full screen
https://72jywy.csb.app/anxiety

[joshuaellis]

I think the problem is your use of key where the elements your passing all share the same key?

See this example where i used a uuid for the elemnts – https://codesandbox.io/s/bold-forest-xq8md2?file=/src/api.ts

let me know your thoughts

[goldylucks]

Thanks!

This solves the first problem, tho I don't understand how. That key isn't used anywhere in the rendering process. What am I missing here?

The second problem of the transition on link click remains.

[goldylucks]

FYI, the problem goes away if I remove the leave field from the useTransition

[joshuaellis]

This solves the first problem, tho I don't understand how. That key isn't used anywhere in the rendering process. What am I missing here?

Inside useTransition we need to use a key internally because we're mapping over arrays etc. so using the same key similar to using keys in react can cause issues.

Your second issue is you're setting the leave prop to {} so it has no transition goals there? So it's not going to fade out. Try logging isLeavingScreen and you'll see that becomes true.

PS. because this isn't a bug i'm going to move it to a discussion.