Preact: Handling keys

[phaux]

This happens since forever.

• Single elements/components aren't remounted when their key changes
• Sometimes elements/components are remounted when they should be just reordered

Example GIF: every element has an entering animation and transition on top css property and this is what happens when I just reorder them. (data from randomuser.me)

Example GIF 2: User details page's key changes upon navigation, but it doesn't get remounted. You can tell by the lack of entering animation.

I'm using [email protected]

Repro repo

[marvinhagemeister]

Oh wow that easily the most beautiful test case that'd we've received :100:

With our rewritten reconciler in Preact X we're finally in a position to address these kind of issues. We already started working on it before cutting our first alpha release and it's coming along greatly. It still needs time until it can be merged, but rest assured that it's something that's on our radar and we definitely want to see fixed for the final release :+1:

/cc @andrewiggins

Related #1325
EDIT: also related: #1267

[developit]

Definitely voting to use this demo to test keys, it's very pleasant :D

[marvinhagemeister]

1440 fixes the second point from the list :tada:

[marvinhagemeister]

Just checked the demo again and we're not doing any unnecessary unmounting anymore :+1:

Preact X alpha 4:

Although we don't do any unmounts anymore the visual output probably looks not like you intended. My guess is that the list items are only meant to move around instead of "zooming in" when the list is reordered. So I was curious, because we only call dom.appendChild and dom.insertBefore() during that phase to reorder the elements.

After a bit of digging it seems like these cause the zoom animation to trigger. To be able to smoothly move the list items around one would have to prevent any methods that somehow change the the dom ordering and only move the nodes around via css. The dom ordering happens because each row is tagged with the person's id as the key. Note that this is correct the correct way, just difficult for animations.

Another option (and probably a better one) would be to make use of the FLIP pattern. The basic idea is that you clone the tree, do the reordering and move the elements back to the previous position via absolute coordinates. Then you'll only need to animate from that to the desired position.

For reference here is the same demo with react: