Save bytes by inlining ref unmount checks (#4896)

* Save bytes by inlining ref unmount checks

* Inline unmount check

* Hoist excessDomChildren check

* Reduce var alloc

* Remove need for clearProcessingException

* Remove need for isNew

* Save bytes by making shouldPlace a number

* Use else to save some bytees

* Save some render bytes

Author: JoviDeCroock

src/component.js

@@ -48,11 +48,10 @@ BaseComponent.prototype.setState = function (update, callback) {
 
 	if (update) {
 		assign(s, update);
+	} else {
+		return;
 	}
 
-	// Skip update if updater function returned null
-	if (update == NULL) return;
-
 	if (this._vnode) {
 		if (callback) {
 			this._stateCallbacks.push(callback);

src/diff/children.js

@@ -128,7 +128,7 @@ export function diffChildren(
 			firstChildDom = newDom;
 		}
 
-		let shouldPlace = !!(childVNode._flags & INSERT_VNODE);
+		let shouldPlace = childVNode._flags & INSERT_VNODE;
 		if (shouldPlace || oldVNode._children === childVNode._children) {
 			oldDom = insert(childVNode, oldDom, parentDom, shouldPlace);
 		} else if (typeof childVNode.type == 'function' && result !== UNDEFINED) {
@@ -251,9 +251,7 @@ function constructNewChildrenArray(
 		// Here, we define isMounting for the purposes of the skew diffing
 		// algorithm. Nodes that are unsuspending are considered mounting and we detect
 		// this by checking if oldVNode._original == null
-		const isMounting = oldVNode == NULL || oldVNode._original == NULL;
-
-		if (isMounting) {
+		if (oldVNode == NULL || oldVNode._original == NULL) {
 			if (matchingIndex == -1) {
 				// When the array of children is growing we need to decrease the skew
 				// as we are adding a new element to the array.
@@ -340,7 +338,7 @@ function constructNewChildrenArray(
  * @param {VNode} parentVNode
  * @param {PreactElement} oldDom
  * @param {PreactElement} parentDom
- * @param {boolean} shouldPlace
+ * @param {number} shouldPlace
  * @returns {PreactElement}
  */
 function insert(parentVNode, oldDom, parentDom, shouldPlace) {

src/diff/index.js

@@ -89,8 +89,11 @@ export function diff(
 
 	outer: if (typeof newType == 'function') {
 		try {
-			let c, isNew, oldProps, oldState, snapshot, clearProcessingException;
-			let newProps = newVNode.props;
+			let c,
+				oldProps,
+				oldState,
+				snapshot,
+				newProps = newVNode.props;
 			const isClassComponent =
 				'prototype' in newType && newType.prototype.render;
 
@@ -109,7 +112,6 @@ export function diff(
 				c = newVNode._component = oldVNode._component;
 				if (c._bits & COMPONENT_PENDING_ERROR) {
 					c._bits |= COMPONENT_PROCESSING_EXCEPTION;
-					clearProcessingException = true;
 				}
 			} else {
 				// Instantiate the new component
@@ -132,7 +134,6 @@ export function diff(
 				if (!c.state) c.state = {};
 				c.context = componentContext;
 				c._globalContext = globalContext;
-				isNew = true;
 				c._bits |= COMPONENT_DIRTY;
 				c._renderCallbacks = [];
 				c._stateCallbacks = [];
@@ -159,7 +160,7 @@ export function diff(
 			c._vnode = newVNode;
 
 			// Invoke pre-render lifecycle methods
-			if (isNew) {
+			if (!oldVNode._component) {
 				if (
 					isClassComponent &&
 					newType.getDerivedStateFromProps == NULL &&
@@ -269,21 +270,24 @@ export function diff(
 				globalContext = assign({}, globalContext, c.getChildContext());
 			}
 
-			if (isClassComponent && !isNew && c.getSnapshotBeforeUpdate != NULL) {
+			if (
+				isClassComponent &&
+				oldVNode._component &&
+				c.getSnapshotBeforeUpdate != NULL
+			) {
 				snapshot = c.getSnapshotBeforeUpdate(oldProps, oldState);
 			}
 
 			let isTopLevelFragment =
 				tmp != NULL && tmp.type === Fragment && tmp.key == NULL;
-			let renderResult = tmp;
 
 			if (isTopLevelFragment) {
-				renderResult = cloneNode(tmp.props.children);
+				tmp = cloneNode(tmp.props.children);
 			}
 
 			oldDom = diffChildren(
 				parentDom,
-				isArray(renderResult) ? renderResult : [renderResult],
+				isArray(tmp) ? tmp : [tmp],
 				newVNode,
 				oldVNode,
 				globalContext,
@@ -303,7 +307,7 @@ export function diff(
 				commitQueue.push(c);
 			}
 
-			if (clearProcessingException) {
+			if (c._bits & COMPONENT_PENDING_ERROR) {
 				c._bits &= ~(COMPONENT_PROCESSING_EXCEPTION | COMPONENT_PENDING_ERROR);
 			}
 		} catch (e) {
@@ -664,13 +668,11 @@ function diffElementNodes(
 export function applyRef(ref, value, vnode) {
 	try {
 		if (typeof ref == 'function') {
-			let hasRefUnmount = typeof ref._unmount == 'function';
-			if (hasRefUnmount) {
-				// @ts-ignore TS doesn't like moving narrowing checks into variables
+			if (typeof ref._unmount == 'function') {
 				ref._unmount();
 			}
 
-			if (!hasRefUnmount || value != NULL) {
+			if (typeof ref._unmount != 'function' || value != NULL) {
 				// Store the cleanup function on the function
 				// instance object itself to avoid shape
 				// transitioning vnode
@@ -693,10 +695,8 @@ export function unmount(vnode, parentVNode, skipRemove) {
 	let r;
 	if (options.unmount) options.unmount(vnode);
 
-	if ((r = vnode.ref)) {
-		if (!r.current || r.current == vnode._dom) {
-			applyRef(r, NULL, parentVNode);
-		}
+	if ((r = vnode.ref) && (!r.current || r.current == vnode._dom)) {
+		applyRef(r, NULL, parentVNode);
 	}
 
 	if ((r = vnode._component) != NULL) {

src/render.js

@@ -18,7 +18,7 @@ export function render(vnode, parentDom) {
 	if (options._root) options._root(vnode, parentDom);
 
 	// @ts-expect-error
-	let isHydrating = !!(vnode && vnode._flags & MODE_HYDRATE);
+	let isHydrating = vnode && vnode._flags & MODE_HYDRATE;
 
 	// To be able to support calling `render()` multiple times on the same
 	// DOM node, we need to obtain a reference to the previous tree. We do
@@ -27,7 +27,7 @@ export function render(vnode, parentDom) {
 	// means that we are mounting a new tree for the first time.
 	let oldVNode = isHydrating ? NULL : parentDom._children;
 
-	vnode = parentDom._children = createElement(Fragment, NULL, [vnode]);
+	parentDom._children = createElement(Fragment, NULL, [vnode]);
 
 	// List of effects that need to be called after diffing.
 	let commitQueue = [],
@@ -37,7 +37,7 @@ export function render(vnode, parentDom) {
 		parentDom,
 		// Determine the new vnode tree and store it on the DOM element on
 		// our custom `_children` property.
-		vnode,
+		parentDom._children,
 		oldVNode || EMPTY_OBJ,
 		EMPTY_OBJ,
 		parentDom.namespaceURI,
@@ -48,13 +48,14 @@ export function render(vnode, parentDom) {
 				: NULL,
 		commitQueue,
 		oldVNode ? oldVNode._dom : parentDom.firstChild,
+		// @ts-expect-error we are doing a bit-wise operation so it's either 0 or true
 		isHydrating,
 		refQueue,
 		parentDom.ownerDocument
 	);
 
 	// Flush all queued effects
-	commitRoot(commitQueue, vnode, refQueue);
+	commitRoot(commitQueue, parentDom._children, refQueue);
 }
 
 /**