Difference in DOM diffing compared to React

I noticed this different behaviour in reconciliation between Preact and React. Here are the 2 demos:

Instructions: Click on the button to see the difference. Preact: https://codesandbox.io/s/61nk3p4z1r React: https://codesandbox.io/s/mymwzvnx28

Split component add a resizable gutter through out-of-react dom changes. In React, the dom changes stay after state changes (on pressing the button). Whereas in Preact, they vanish. I believe Preact’s behavior is correct, but not sure 😐 Thoughts?

[developit]

The diff is supposed to skip elements not created by preact, but it looks like changes in 8.0 added a way for that to be bypassed. Specifically, originalChildren points to the complete list of Element childNodes without any filtering to include only nodes created by preact. During child reordering traversal, we access this list based on index without passing over externally created nodes. That results in the “gutter” div in this split.js library being removed here:

https://github.com/developit/preact/blob/377e31b5c6d42c4ca92085571d5d4f0c9dbe4ba2/src/vdom/diff.js#L245

The issue is, innerDiffNode can’t use a filtered Array of Nodes in place of its current .childNodes reference, because we rely on the semantics of it being a Live NodeList. For now, that means something like this will be required:

function innerDiffNode( .. ) {
    let offset = 0;  // stores childNodes offset due to skipping

	// replacing L245
	f = originalChildren[i + offset];
	while (f != null && !isHydrating && f[ATTR_KEY] == null) {
		offset++;
		f = originalChildren[i + offset];
	}
	// now we know `f` isn't an externally-created node

[marvinhagemeister]

Closing, I can’t reproduce the original issue anymore with the code in master 🎉