From 7259ee4a88e38e5dace005e1e43a892f80f50f14 Mon Sep 17 00:00:00 2001
From: Jason Miller <developit@users.noreply.github.com>
Date: Fri, 6 Dec 2024 08:57:37 -0500
Subject: [PATCH 1/2] Check slice oldChildren perf

---
 src/diff/children.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/diff/children.js b/src/diff/children.js
index 68b8f27f89..cd66556991 100644
--- a/src/diff/children.js
+++ b/src/diff/children.js
@@ -166,7 +166,9 @@ function constructNewChildrenArray(
 
 	let skew = 0;
 
-	newParentVNode._children = new Array(newChildrenLength);
+	const newChildren = oldChildren.slice();
+	newChildren.length = newChildrenLength;
+	newParentVNode._children = newChildren;
 	for (i = 0; i < newChildrenLength; i++) {
 		// @ts-expect-error We are reusing the childVNode variable to hold both the
 		// pre and post normalized childVNode
@@ -177,7 +179,7 @@ function constructNewChildrenArray(
 			typeof childVNode == 'boolean' ||
 			typeof childVNode == 'function'
 		) {
-			childVNode = newParentVNode._children[i] = null;
+			newChildren[i] = null;
 			continue;
 		}
 		// If this newVNode is being reused (e.g. <div>{reuse}{reuse}</div>) in the same diff,
@@ -190,7 +192,7 @@ function constructNewChildrenArray(
 			typeof childVNode == 'bigint' ||
 			childVNode.constructor == String
 		) {
-			childVNode = newParentVNode._children[i] = createVNode(
+			childVNode = newChildren[i] = createVNode(
 				null,
 				childVNode,
 				null,
@@ -198,7 +200,7 @@ function constructNewChildrenArray(
 				null
 			);
 		} else if (isArray(childVNode)) {
-			childVNode = newParentVNode._children[i] = createVNode(
+			childVNode = newChildren[i] = createVNode(
 				Fragment,
 				{ children: childVNode },
 				null,
@@ -210,7 +212,7 @@ function constructNewChildrenArray(
 			// scenario:
 			//   const reuse = <div />
 			//   <div>{reuse}<span />{reuse}</div>
-			childVNode = newParentVNode._children[i] = createVNode(
+			childVNode = newChildren[i] = createVNode(
 				childVNode.type,
 				childVNode.props,
 				childVNode.key,
@@ -218,7 +220,7 @@ function constructNewChildrenArray(
 				childVNode._original
 			);
 		} else {
-			childVNode = newParentVNode._children[i] = childVNode;
+			childVNode = newChildren[i] = childVNode;
 		}
 
 		const skewedIndex = i + skew;

From 2f12e0a7fc5297a24d2f5c33e3331d7b65d2d645 Mon Sep 17 00:00:00 2001
From: Jason Miller <developit@users.noreply.github.com>
Date: Fri, 6 Dec 2024 09:08:59 -0500
Subject: [PATCH 2/2] Refactor children array construction logic

---
 src/diff/children.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/diff/children.js b/src/diff/children.js
index cd66556991..9d76aa7d36 100644
--- a/src/diff/children.js
+++ b/src/diff/children.js
@@ -69,15 +69,19 @@ export function diffChildren(
 
 	let newChildrenLength = renderResult.length;
 
+	let newChildren = new Array(newChildrenLength);
+	newParentVNode._children = newChildren;
+
 	oldDom = constructNewChildrenArray(
 		newParentVNode,
+		newChildren,
 		renderResult,
 		oldChildren,
 		oldDom
 	);
 
 	for (i = 0; i < newChildrenLength; i++) {
-		childVNode = newParentVNode._children[i];
+		childVNode = newChildren[i];
 		if (childVNode == null) continue;
 
 		// At this point, constructNewChildrenArray has assigned _index to be the
@@ -144,11 +148,13 @@ export function diffChildren(
 
 /**
  * @param {VNode} newParentVNode
+ * @param {VNode[]} newChildren
  * @param {ComponentChildren[]} renderResult
  * @param {VNode[]} oldChildren
  */
 function constructNewChildrenArray(
 	newParentVNode,
+	newChildren,
 	renderResult,
 	oldChildren,
 	oldDom
@@ -166,9 +172,6 @@ function constructNewChildrenArray(
 
 	let skew = 0;
 
-	const newChildren = oldChildren.slice();
-	newChildren.length = newChildrenLength;
-	newParentVNode._children = newChildren;
 	for (i = 0; i < newChildrenLength; i++) {
 		// @ts-expect-error We are reusing the childVNode variable to hold both the
 		// pre and post normalized childVNode