Use == where possible and precompute .length (#4599)

Author: JoviDeCroock

src/diff/children.js

@@ -73,7 +73,8 @@ export function diffChildren(
 		newParentVNode,
 		renderResult,
 		oldChildren,
-		oldDom
+		oldDom,
+		newChildrenLength
 	);
 
 	for (i = 0; i < newChildrenLength; i++) {
@@ -151,7 +152,8 @@ function constructNewChildrenArray(
 	newParentVNode,
 	renderResult,
 	oldChildren,
-	oldDom
+	oldDom,
+	newChildrenLength
 ) {
 	/** @type {number} */
 	let i;
@@ -160,7 +162,6 @@ function constructNewChildrenArray(
 	/** @type {VNode} */
 	let oldVNode;
 
-	const newChildrenLength = renderResult.length;
 	let oldChildrenLength = oldChildren.length,
 		remainingOldChildren = oldChildrenLength;
 
@@ -177,7 +178,7 @@ function constructNewChildrenArray(
 			typeof childVNode == 'boolean' ||
 			typeof childVNode == 'function'
 		) {
-			childVNode = newParentVNode._children[i] = null;
+			newParentVNode._children[i] = null;
 			continue;
 		}
 		// If this newVNode is being reused (e.g. <div>{reuse}{reuse}</div>) in the same diff,
@@ -258,7 +259,7 @@ function constructNewChildrenArray(
 			if (typeof childVNode.type != 'function') {
 				childVNode._flags |= INSERT_VNODE;
 			}
-		} else if (matchingIndex !== skewedIndex) {
+		} else if (matchingIndex != skewedIndex) {
 			// When we move elements around i.e. [0, 1, 2] --> [1, 0, 2]
 			// --> we diff 1, we find it at position 1 while our skewed index is 0 and our skew is 0
 			//     we set the skew to 1 as we found an offset.
@@ -301,7 +302,7 @@ function constructNewChildrenArray(
 	if (remainingOldChildren) {
 		for (i = 0; i < oldChildrenLength; i++) {
 			oldVNode = oldChildren[i];
-			if (oldVNode != null && (oldVNode._flags & MATCHED) === 0) {
+			if (oldVNode != null && (oldVNode._flags & MATCHED) == 0) {
 				if (oldVNode._dom == oldDom) {
 					oldDom = getDomSibling(oldVNode);
 				}
@@ -347,7 +348,7 @@ function insert(parentVNode, oldDom, parentDom) {
 
 	do {
 		oldDom = oldDom && oldDom.nextSibling;
-	} while (oldDom != null && oldDom.nodeType === 8);
+	} while (oldDom != null && oldDom.nodeType == 8);
 
 	return oldDom;
 }
@@ -402,16 +403,16 @@ function findMatchingIndex(
 	// If there is an unkeyed functional VNode, that isn't a built-in like our Fragment,
 	// we should not search as we risk re-using state of an unrelated VNode.
 	let shouldSearch =
-		(typeof type !== 'function' || type === Fragment || key) &&
+		(typeof type != 'function' || type === Fragment || key) &&
 		remainingOldChildren >
-			(oldVNode != null && (oldVNode._flags & MATCHED) === 0 ? 1 : 0);
+			(oldVNode != null && (oldVNode._flags & MATCHED) == 0 ? 1 : 0);
 
 	if (
 		oldVNode === null ||
 		(oldVNode &&
 			key == oldVNode.key &&
 			type === oldVNode.type &&
-			(oldVNode._flags & MATCHED) === 0)
+			(oldVNode._flags & MATCHED) == 0)
 	) {
 		return skewedIndex;
 	} else if (shouldSearch) {
@@ -420,7 +421,7 @@ function findMatchingIndex(
 				oldVNode = oldChildren[x];
 				if (
 					oldVNode &&
-					(oldVNode._flags & MATCHED) === 0 &&
+					(oldVNode._flags & MATCHED) == 0 &&
 					key == oldVNode.key &&
 					type === oldVNode.type
 				) {
@@ -433,7 +434,7 @@ function findMatchingIndex(
 				oldVNode = oldChildren[y];
 				if (
 					oldVNode &&
-					(oldVNode._flags & MATCHED) === 0 &&
+					(oldVNode._flags & MATCHED) == 0 &&
 					key == oldVNode.key &&
 					type === oldVNode.type
 				) {

src/diff/index.js

@@ -171,10 +171,10 @@ export function diff(
 							c._nextState,
 							componentContext
 						) === false) ||
-						newVNode._original === oldVNode._original)
+						newVNode._original == oldVNode._original)
 				) {
 					// More info about this here: https://gist.github.com/JoviDeCroock/bec5f2ce93544d2e6070ef8e0036e4e8
-					if (newVNode._original !== oldVNode._original) {
+					if (newVNode._original != oldVNode._original) {
 						// When we are dealing with a bail because of sCU we have to update
 						// the props, state and dirty-state.
 						// when we are dealing with strict-equality we don't as the child could still
@@ -294,7 +294,7 @@ export function diff(
 						? MODE_HYDRATE | MODE_SUSPENDED
 						: MODE_SUSPENDED;
 
-					while (oldDom && oldDom.nodeType === 8 && oldDom.nextSibling) {
+					while (oldDom && oldDom.nodeType == 8 && oldDom.nextSibling) {
 						oldDom = oldDom.nextSibling;
 					}
 
@@ -313,7 +313,7 @@ export function diff(
 		}
 	} else if (
 		excessDomChildren == null &&
-		newVNode._original === oldVNode._original
+		newVNode._original == oldVNode._original
 	) {
 		newVNode._children = oldVNode._children;
 		newVNode._dom = oldVNode._dom;
@@ -405,8 +405,8 @@ function diffElementNodes(
 	let checked;
 
 	// Tracks entering and exiting namespaces when descending through the tree.
-	if (nodeType === 'svg') namespace = SVG_NAMESPACE;
-	else if (nodeType === 'math') namespace = MATH_NAMESPACE;
+	if (nodeType == 'svg') namespace = SVG_NAMESPACE;
+	else if (nodeType == 'math') namespace = MATH_NAMESPACE;
 	else if (!namespace) namespace = XHTML_NAMESPACE;
 
 	if (excessDomChildren != null) {
@@ -418,8 +418,8 @@ function diffElementNodes(
 			// excessDomChildren so it isn't later removed in diffChildren
 			if (
 				value &&
-				'setAttribute' in value === !!nodeType &&
-				(nodeType ? value.localName === nodeType : value.nodeType === 3)
+				'setAttribute' in value == !!nodeType &&
+				(nodeType ? value.localName == nodeType : value.nodeType == 3)
 			) {
 				dom = value;
 				excessDomChildren[i] = null;
@@ -429,7 +429,7 @@ function diffElementNodes(
 	}
 
 	if (dom == null) {
-		if (nodeType === null) {
+		if (nodeType == null) {
 			return document.createTextNode(newProps);
 		}
 
@@ -530,7 +530,7 @@ function diffElementNodes(
 				newVNode,
 				oldVNode,
 				globalContext,
-				nodeType === 'foreignObject' ? XHTML_NAMESPACE : namespace,
+				nodeType == 'foreignObject' ? XHTML_NAMESPACE : namespace,
 				excessDomChildren,
 				commitQueue,
 				excessDomChildren
@@ -551,7 +551,7 @@ function diffElementNodes(
 		// As above, don't diff props during hydration
 		if (!isHydrating) {
 			i = 'value';
-			if (nodeType === 'progress' && inputValue == null) {
+			if (nodeType == 'progress' && inputValue == null) {
 				dom.removeAttribute('value');
 			} else if (
 				inputValue !== UNDEFINED &&
@@ -560,11 +560,11 @@ function diffElementNodes(
 				// is missing the progress bar is treated as indeterminate.
 				// To fix that we'll always update it when it is 0 for progress elements
 				(inputValue !== dom[i] ||
-					(nodeType === 'progress' && !inputValue) ||
+					(nodeType == 'progress' && !inputValue) ||
 					// This is only for IE 11 to fix <select> value not being updated.
 					// To avoid a stale select value we need to set the option.value
 					// again, which triggers IE11 to re-evaluate the select value
-					(nodeType === 'option' && inputValue !== oldProps[i]))
+					(nodeType == 'option' && inputValue !== oldProps[i]))
 			) {
 				setProperty(dom, i, inputValue, oldProps[i], namespace);
 			}

src/diff/props.js

@@ -2,7 +2,7 @@ import { IS_NON_DIMENSIONAL, SVG_NAMESPACE } from '../constants';
 import options from '../options';
 
 function setStyle(style, key, value) {
-	if (key[0] === '-') {
+	if (key[0] == '-') {
 		style.setProperty(key, value == null ? '' : value);
 	} else if (value == null) {
 		style[key] = '';
@@ -39,7 +39,7 @@ let eventClock = 0;
 export function setProperty(dom, name, value, oldValue, namespace) {
 	let useCapture;
 
-	o: if (name === 'style') {
+	o: if (name == 'style') {
 		if (typeof value == 'string') {
 			dom.style.cssText = value;
 		} else {
@@ -65,14 +65,14 @@ export function setProperty(dom, name, value, oldValue, namespace) {
 		}
 	}
 	// Benchmark for comparison: https://esbench.com/bench/574c954bdb965b9a00965ac6
-	else if (name[0] === 'o' && name[1] === 'n') {
-		useCapture = name !== (name = name.replace(CAPTURE_REGEX, '$1'));
+	else if (name[0] == 'o' && name[1] == 'n') {
+		useCapture = name != (name = name.replace(CAPTURE_REGEX, '$1'));
 
 		// Infer correct casing for DOM built-in events:
 		if (
 			name.toLowerCase() in dom ||
-			name === 'onFocusOut' ||
-			name === 'onFocusIn'
+			name == 'onFocusOut' ||
+			name == 'onFocusIn'
 		)
 			name = name.toLowerCase().slice(2);
 		else name = name.slice(2);
@@ -136,7 +136,7 @@ export function setProperty(dom, name, value, oldValue, namespace) {
 
 		if (typeof value == 'function') {
 			// never serialize functions as attribute values
-		} else if (value != null && (value !== false || name[4] === '-')) {
+		} else if (value != null && (value !== false || name[4] == '-')) {
 			dom.setAttribute(name, name == 'popover' && value == true ? '' : value);
 		} else {
 			dom.removeAttribute(name);

src/render.js

@@ -13,7 +13,7 @@ import { slice } from './util';
  */
 export function render(vnode, parentDom, replaceNode) {
 	// https://github.com/preactjs/preact/issues/3794
-	if (parentDom === document) {
+	if (parentDom == document) {
 		parentDom = document.documentElement;
 	}