diff --git a/demo/lazyBarrier.jsx b/demo/lazyBarrier.jsx new file mode 100644 index 0000000000..8e2294e389 --- /dev/null +++ b/demo/lazyBarrier.jsx @@ -0,0 +1,4 @@ +import { lazy } from 'react'; + +export const TestComp = lazy(() => import('./testComp')); +export const TestWrapper = lazy(() => import('./testWrapper')); diff --git a/demo/testComp.jsx b/demo/testComp.jsx new file mode 100644 index 0000000000..f7cb52463c --- /dev/null +++ b/demo/testComp.jsx @@ -0,0 +1,5 @@ +const TestComp = () => { + return

Bar

; +}; + +export default TestComp; diff --git a/demo/testWrapper.jsx b/demo/testWrapper.jsx new file mode 100644 index 0000000000..fabda5a143 --- /dev/null +++ b/demo/testWrapper.jsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const TestWrapper = ({ children }) => { + return
{children}
; +}; + +export default TestWrapper; diff --git a/src/diff/children.js b/src/diff/children.js index eb86799efc..c692d66e71 100644 --- a/src/diff/children.js +++ b/src/diff/children.js @@ -320,16 +320,7 @@ function constructNewChildrenArray(newParentVNode, renderResult, oldChildren) { skew--; } } else if (matchingIndex < skewedIndex) { - // Our matched DOM-node is further in the negative way in the list of children - // than where it's at now. - - // When the remaining old chiildren is less than the new children - // plus our skewed index we know we are dealing with a growing list - if (remainingOldChildren < newChildrenLength + skewedIndex) { - skew += matchingIndex + skewedIndex; - } else { - skew = 0; - } + skew--; } // Move this VNode's DOM if the original index (matchingIndex) doesn't diff --git a/test/browser/render.test.js b/test/browser/render.test.js index e6caf3adb9..5d7ca22fc8 100644 --- a/test/browser/render.test.js +++ b/test/browser/render.test.js @@ -1636,6 +1636,7 @@ describe('render()', () => { ); const a = ['0', '1', '2', '3', '4', '5', '6']; const b = ['1', '3', '5', '2', '6', '4', '0']; + const c = ['11', '3', '1', '4', '6', '2', '5', '0', '9', '10']; render(, scratch); expect(scratch.innerHTML).to.equal( `
${a.map(n => `
${n}
`).join('')}
` @@ -1646,6 +1647,11 @@ describe('render()', () => { `
${b.map(n => `
${n}
`).join('')}
` ); + render(, scratch); + expect(scratch.innerHTML).to.equal( + `
${c.map(n => `
${n}
`).join('')}
` + ); + render(, scratch); expect(scratch.innerHTML).to.equal( `
${a.map(n => `
${n}
`).join('')}
`