Avoid allocating arrays for single children

Author: JoviDeCroock

src/diff/children.js

@@ -23,7 +23,8 @@ import { getDomSibling } from '../component';
  * Diff the children of a virtual node
  * @param {PreactElement} parentDom The DOM element whose children are being
  * diffed
- * @param {ComponentChildren[]} renderResult
+ * @param {ComponentChildren|ComponentChildren[]} renderResult A single child or
+ * an array of them; single children are not wrapped by the caller.
  * @param {VNode} newParentVNode The new virtual node whose children should be
  * diff'ed against oldParentVNode
  * @param {VNode} oldParentVNode The old virtual node whose children should be
@@ -71,11 +72,16 @@ export function diffChildren(
 	/** @type {VNode[]} */
 	let oldChildren = oldParentVNode._children || EMPTY_ARR;
 
-	let newChildrenLength = renderResult.length;
+	// `renderResult` is passed unwrapped: the overwhelming majority of children
+	// diffs are a single child (~84% in the wild, see #2618), so wrapping it in
+	// a throwaway `[child]` array at the call site is pure allocation churn.
+	let isArr = isArray(renderResult);
+	let newChildrenLength = isArr ? renderResult.length : 1;
 
 	oldDom = constructNewChildrenArray(
 		newParentVNode,
 		renderResult,
+		isArr,
 		oldChildren,
 		oldDom,
 		newChildrenLength
@@ -158,12 +164,14 @@ export function diffChildren(
 
 /**
  * @param {VNode} newParentVNode
- * @param {ComponentChildren[]} renderResult
+ * @param {ComponentChildren|ComponentChildren[]} renderResult
+ * @param {boolean} isArr Whether `renderResult` is an array of children
  * @param {VNode[]} oldChildren
  */
 function constructNewChildrenArray(
 	newParentVNode,
 	renderResult,
+	isArr,
 	oldChildren,
 	oldDom,
 	newChildrenLength
@@ -184,18 +192,19 @@ function constructNewChildrenArray(
 	 * real reorder happened and we need to compute the minimal set of moves. */
 	let moved = false;
 
-	newParentVNode._children = new Array(newChildrenLength);
+	/** @type {VNode[]} */
+	let newChildren = (newParentVNode._children = new Array(newChildrenLength));
 	for (i = 0; i < newChildrenLength; i++) {
 		// @ts-expect-error We are reusing the childVNode variable to hold both the
 		// pre and post normalized childVNode
-		childVNode = renderResult[i];
+		childVNode = isArr ? renderResult[i] : renderResult;
 
 		if (
 			childVNode == NULL ||
 			typeof childVNode == 'boolean' ||
 			typeof childVNode == 'function'
 		) {
-			newParentVNode._children[i] = NULL;
+			newChildren[i] = NULL;
 			continue;
 		}
 		// If this newVNode is being reused (e.g. <div>{reuse}{reuse}</div>) in the same diff,
@@ -208,15 +217,15 @@ function constructNewChildrenArray(
 			typeof childVNode != 'object' ||
 			childVNode.constructor == String
 		) {
-			childVNode = newParentVNode._children[i] = createVNode(
+			childVNode = newChildren[i] = createVNode(
 				NULL,
 				childVNode,
 				NULL,
 				NULL,
 				NULL
 			);
 		} else if (isArray(childVNode)) {
-			childVNode = newParentVNode._children[i] = createVNode(
+			childVNode = newChildren[i] = createVNode(
 				Fragment,
 				{ children: childVNode },
 				NULL,
@@ -228,15 +237,15 @@ 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,
 				childVNode.ref ? childVNode.ref : NULL,
 				childVNode._original
 			);
 		} else {
-			newParentVNode._children[i] = childVNode;
+			newChildren[i] = childVNode;
 		}
 
 		const skewedIndex = i + skew;
@@ -331,7 +340,7 @@ function constructNewChildrenArray(
 		/** @type {number[]} length of the longest increasing subsequence ending at child i */
 		let lisLengths = [];
 		for (i = 0; i < newChildrenLength; i++) {
-			childVNode = newParentVNode._children[i];
+			childVNode = newChildren[i];
 			if (childVNode && childVNode._flags & MATCHED) {
 				// Binary search for the insertion point, keeping the pass at
 				// O(n log n) even for pathological reorders.
@@ -359,7 +368,7 @@ function constructNewChildrenArray(
 				if (lisLengths[i] == skew) {
 					skew--;
 				} else {
-					newParentVNode._children[i]._flags |= INSERT_VNODE;
+					newChildren[i]._flags |= INSERT_VNODE;
 				}
 			}
 		}

src/diff/index.js

@@ -329,7 +329,7 @@ export function diff(
 
 			oldDom = diffChildren(
 				parentDom,
-				isArray(renderResult) ? renderResult : [renderResult],
+				renderResult,
 				newVNode,
 				oldVNode,
 				globalContext,
@@ -670,7 +670,7 @@ function diffElementNodes(
 
 			diffChildren(
 				parentDom,
-				isArray(newChildren) ? newChildren : [newChildren],
+				newChildren,
 				newVNode,
 				oldVNode,
 				globalContext,