diff --git a/src/diff/children.js b/src/diff/children.js index c4faed9cfe..ed08514f4d 100644 --- a/src/diff/children.js +++ b/src/diff/children.js @@ -227,9 +227,11 @@ function constructNewChildrenArray(newParentVNode, renderResult, oldChildren) { childVNode = newParentVNode._children[i] = childVNode; } + const skewedIndex = i + skew; + // Handle unmounting null placeholders, i.e. VNode => null in unkeyed children if (childVNode == null) { - oldVNode = oldChildren[i]; + oldVNode = oldChildren[skewedIndex]; if ( oldVNode && oldVNode.key == null && @@ -238,8 +240,6 @@ function constructNewChildrenArray(newParentVNode, renderResult, oldChildren) { ) { if (oldVNode._dom == newParentVNode._nextDom) { newParentVNode._nextDom = getDomSibling(oldVNode); - } else { - skew++; } unmount(oldVNode, oldVNode, false); @@ -252,7 +252,7 @@ function constructNewChildrenArray(newParentVNode, renderResult, oldChildren) { // to unmount this VNode again seeing `_match==true`. Further, // getDomSibling doesn't know about _match and so would incorrectly // assume DOM nodes in this subtree are mounted and usable. - oldChildren[i] = null; + oldChildren[skewedIndex] = null; remainingOldChildren--; } continue; @@ -261,7 +261,6 @@ function constructNewChildrenArray(newParentVNode, renderResult, oldChildren) { childVNode._parent = newParentVNode; childVNode._depth = newParentVNode._depth + 1; - const skewedIndex = i + skew; const matchingIndex = findMatchingIndex( childVNode, oldChildren, diff --git a/test/browser/fragments.test.js b/test/browser/fragments.test.js index 4634a4320e..20fed865e4 100644 --- a/test/browser/fragments.test.js +++ b/test/browser/fragments.test.js @@ -1304,7 +1304,7 @@ describe('Fragment', () => { 'rendering from true to false' ); expectDomLogToBe( - ['