Provide solution to long standing memleak (#4853)

* Provide solution to long standing memleak

* Experiment w/ perf

Author: JoviDeCroock

compat/src/suspense.js

@@ -1,5 +1,9 @@
 import { Component, createElement, options, Fragment } from 'preact';
-import { MODE_HYDRATE, COMPONENT_FORCE } from '../../src/constants';
+import {
+	MODE_HYDRATE,
+	FORCE_PROPS_REVALIDATE,
+	COMPONENT_FORCE
+} from '../../src/constants';
 import { assign } from './util';
 
 const oldCatchError = options._catchError;
@@ -67,6 +71,10 @@ function detachedClone(vnode, detachedParent, parentDom) {
 
 function removeOriginal(vnode, detachedParent, originalParent) {
 	if (vnode && originalParent) {
+		if (typeof vnode.type == 'string') {
+			vnode._flags |= FORCE_PROPS_REVALIDATE;
+		}
+
 		vnode._original = null;
 		vnode._children =
 			vnode._children &&

compat/test/browser/suspense-hydration.test.js

@@ -656,6 +656,14 @@ describe('suspense hydration', () => {
 				rerender();
 
 				expect(scratch.innerHTML, 'second suspend').to.equal(div('fallback'));
+				expect(getLog()).to.deep.equal([
+					'<div>b1.remove()',
+					'<div>a.remove()',
+					'<div>c.remove()',
+					'<div>.appendChild(#text)',
+					'<div>.appendChild(<div>fallback)'
+				]);
+				clearLog();
 
 				return resolve2(() => <div onClick={bOnClickSpy}>b2</div>);
 			})
@@ -664,12 +672,20 @@ describe('suspense hydration', () => {
 				expect(scratch.innerHTML, 'second suspend resumes').to.equal(
 					[div('a'), div('b2'), div('c')].join('')
 				);
-
-				scratch.lastChild.dispatchEvent(createEvent('click'));
-				expect(cOnClickSpy).toHaveBeenCalledTimes(2);
+				expect(getLog()).to.deep.equal([
+					'<div>fallback.appendChild(<div>a)',
+					'<div>fallback.remove()',
+					'<div>a.appendChild(<div>a)',
+					'<div>.appendChild(#text)',
+					'<div>a.appendChild(<div>b2)',
+					'<div>ab2.appendChild(<div>c)'
+				]);
 
 				scratch.firstChild.nextSibling.dispatchEvent(createEvent('click'));
 				expect(bOnClickSpy).toHaveBeenCalledTimes(2);
+
+				scratch.lastChild.dispatchEvent(createEvent('click'));
+				expect(cOnClickSpy).toHaveBeenCalledTimes(2);
 			});
 	});
 

src/constants.js

@@ -7,6 +7,8 @@ export const MODE_SUSPENDED = 1 << 7;
 export const INSERT_VNODE = 1 << 2;
 /** Indicates a VNode has been matched with another VNode in the diff */
 export const MATCHED = 1 << 1;
+/** Indicates that this vnode has been unmounted before indicating the loss of event listeners */
+export const FORCE_PROPS_REVALIDATE = 1 << 0;
 
 // component._bits
 /** Component is processing an exception */

src/diff/index.js

@@ -4,6 +4,7 @@ import {
 	COMPONENT_PENDING_ERROR,
 	COMPONENT_PROCESSING_EXCEPTION,
 	EMPTY_OBJ,
+	FORCE_PROPS_REVALIDATE,
 	MATH_NAMESPACE,
 	MODE_HYDRATE,
 	MODE_SUSPENDED,
@@ -388,7 +389,7 @@ export function diff(
 
 	if ((tmp = options.diffed)) tmp(newVNode);
 
-	return newVNode._flags & MODE_SUSPENDED ? undefined : oldDom;
+	return newVNode._flags & MODE_SUSPENDED ? UNDEFINED : oldDom;
 }
 
 function markAsForce(vnode) {
@@ -566,6 +567,7 @@ function diffElementNodes(
 
 		// During hydration, props are not diffed at all (including dangerouslySetInnerHTML)
 		// @TODO we should warn in debug mode when props don't match here.
+		const shouldRevalidateProps = oldVNode._flags & FORCE_PROPS_REVALIDATE;
 		for (i in newProps) {
 			value = newProps[i];
 			if (i == 'children') {
@@ -578,7 +580,7 @@ function diffElementNodes(
 				checked = value;
 			} else if (
 				(!isHydrating || typeof value == 'function') &&
-				oldProps[i] !== value
+				(oldProps[i] !== value || shouldRevalidateProps)
 			) {
 				setProperty(dom, i, value, oldProps[i], namespace);
 			}
@@ -723,7 +725,11 @@ export function unmount(vnode, parentVNode, skipRemove) {
 		removeNode(vnode._dom);
 	}
 
-	vnode._component = vnode._parent = vnode._dom = UNDEFINED;
+	if (vnode._dom && vnode._dom._listeners) {
+		vnode._dom._listeners = NULL;
+	}
+
+	vnode._dom = vnode._component = vnode._parent = NULL;
 }
 
 /** The `.render()` method for a PFC backing instance. */