Improve performance issue on transition between large components

[kossel]

I'm trying to mimic something like a rating card stack where you can go next and prev (just 1 card for prev)

I spent a lot of time to get the desired effect (I'm new to this) which you can see here In this codesandbox. I had simplified a little bit the code, but in real life, each card is a very complex component so I have to mount the next card offscreen while idle in order to guarantee the smoothness when sliding in

I have few questions:

• I had to keep incrementing the array and setting null so I can trash cards that were "rated" you can see the console.log, is there a better way for this?
• since I would like the user can go back, I have to keep track of 3 cards, if the user clicks next too fast, the next card mounting might happen at the same time the card is sliding in, which results in a very janky low fps experience, any suggestion to improve this?
• is it useSpring correct for my case? I first started with useTransition but when transition starts, some portion of my "card" component is still being mounted which makes the animation very laggy... :(

apreciated