Batch deletion of removed items

[mart-jansink]

Batch the deletion of removed items after they transitioned out. See #461.

[drcmda]

could you checkout the hooks.8.x branch and see if this is still an issue? it's going to get all refactored soon and in the new branch it removes lazily by default already

[mart-jansink]

I'll give it a try, but I'll need to work out how to use hooks first, so it may take a bit. Or am I missing a way to still use <Transition /> with that branch?

[drcmda]

No, for clarity it's been singled out, it will come back when i merge. I can merge this - just give me some time to test it, super busy right now - but i won't forget it.

[grrowl]

I'm still seeing this issue on [email protected] using the useTransition hook. Would love to see this merged :)

[drcmda]

@grrowl could you make a minimal codesandbox to show the effect?

[grrowl]

Sure thing: this demo exhibits the behavior using hooks and the latest react-spring: https://codesandbox.io/s/my869ojmjj

[drcmda]

@grrowl could you give me a super quick rundown how you expect it to behave?

[grrowl]

Sorry, I didn't explain the problem exhibited by the demo.

When you click "Filter", we re-render with only the item "b". But notice, the item "b" moves into the space taken by "f", even though all the children are keyed and should maintain their position through transitions in and out.

So, what we expect when changing the items array is rendering a list of (using punctuation to illustrate fading:

• [a] [b] [c] [d] [e] [f] [g] => begin transition out
• .a. [b] .c. .d. .e. .f. .g. => transition finishes (b maintains position throughout)
• [b]

The problem is the items are re-ordered when rendered through the "transition" phase as:

• [a] [b] [c] [d] [e] [f] [g] => begin transition out
• .a. .d. .e. .f. .g. [b] .c. => transition finishes (b and c move to the end of the transitions array for some reason)
• [b]

In my example I included the key in item render since, especially when setting unique: true, elements' order should be maintained throughout renders.

edit: my problem is as described in linked pull request #461 — but testing locally (merging mart-jansink:master into master) hasn't seemed fixed the issue. will try to have a stab at this problem or a unit test soon.

[drcmda]

yeah, i think batch delete wouldn't have an effect on order, and it actually does batch delete now in some situations. if you want to look at it, that would be amazing as my time's limited right now. it's here somewhere: https://github.com/react-spring/react-spring/blob/master/src/useTransition.js#L250-L259

this is how i debug stuff: https://github.com/react-spring/react-spring-examples/blob/master/README.md