React-spring: Array items rearrange with useTransition

[ruthmpardee]

🐛 Bug Report

When using useTransition with an array of items, when the items are transitioning out of the DOM, the order of the items changes; the array is rearranged.

GIPHY

https://codesandbox.io/s/react-spring-cards-reordering-8tckt

To Reproduce

Steps to reproduce the behavior:
See sandbox: https://codesandbox.io/s/react-spring-cards-reordering-8tckt

When using useTransition from [ 1, 2 ] to [ 1, 2, 3, 4] back to [ 1, 2 ], the order temporarily changes to [ 4, 1, 2, 3 ] while the transition is happening.

Expected behavior

I would expect the order to stay the same while transitioning back (it should always be [ 1, 2, 3, 4 ])

Link to repro (highly encouraged)

https://codesandbox.io/s/react-spring-cards-reordering-8tckt

Environment

• react-spring v8.0.27
• react v16.12.0

[ruthmpardee]

Confirmed this bug is not happening in v9: https://codesandbox.io/s/react-spring-cards-reordering-v9-dpfm1

[probablyup]

I'm running into this as well.

[probablyup]

@drcmda any chance you could take a look? Not sure where to start debugging

[theodoretliu]

Are there any updates on this bug?