Diff behaviour not as expected - preact unmounting then remounting the same DOM nodes even when there is a key

I have found that preact is unecessarily tearing down and rebuilding DOM nodes even when a key is used (example codepen)

In this case even though the key is supplied almost all of the DOM nodes are being removed and then added again even though only three are changed

EDIT TO be clear it is expected that the components are being rerendered, but the issue is that all of the DOM nodes (not virtual dom) are being removed and then re-added again

(before changing the document):

(after changing the document):

After debugging I eventually found that each time the new document was selected the span elements (in the real DOM) inside the content were being removed and then added again, and the weird thing is that the spans that are being removed are exactly the same as the spans that are being added (as in they were the same instance)

Expected Behaviour Only a few DOM nodes will be changed (as keys are supplied and most of the vdom remains the same)

Actual Behaviour All of the DOM nodes are being removed and then re-added again

[lewischa]

That’s great news! Is there a timeline for that release?

[yaodingyd]

@lewischa this is difficult to fix in the currently version of Preact, but it has been fixed in the next major version.