easier to read

Author: JoviDeCroock

demo/lazyBarrier.jsx

@@ -0,0 +1,4 @@
+import { lazy } from 'react';
+
+export const TestComp = lazy(() => import('./testComp'));
+export const TestWrapper = lazy(() => import('./testWrapper'));

demo/testComp.jsx

@@ -0,0 +1,5 @@
+const TestComp = () => {
+	return <p>Bar</p>;
+};
+
+export default TestComp;

demo/testWrapper.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TestWrapper = ({ children }) => {
+	return <div>{children}</div>;
+};
+
+export default TestWrapper;

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

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(<App items={a} />, scratch);
 		expect(scratch.innerHTML).to.equal(
 			`<div>${a.map(n => `<div>${n}</div>`).join('')}</div>`
@@ -1646,6 +1647,11 @@ describe('render()', () => {
 			`<div>${b.map(n => `<div>${n}</div>`).join('')}</div>`
 		);
 
+		render(<App items={c} />, scratch);
+		expect(scratch.innerHTML).to.equal(
+			`<div>${c.map(n => `<div>${n}</div>`).join('')}</div>`
+		);
+
 		render(<App items={a} />, scratch);
 		expect(scratch.innerHTML).to.equal(
 			`<div>${a.map(n => `<div>${n}</div>`).join('')}</div>`