diff --git a/hooks/src/index.js b/hooks/src/index.js
index ca87285ce4..ec19748d18 100644
--- a/hooks/src/index.js
+++ b/hooks/src/index.js
@@ -288,19 +288,20 @@ export function useErrorBoundary(cb) {
  * After paint effects consumer.
  */
 function flushAfterPaintEffects() {
-	afterPaintEffects.forEach(component => {
-		if (component._parentDom) {
-			try {
-				component.__hooks._pendingEffects.forEach(invokeCleanup);
-				component.__hooks._pendingEffects.forEach(invokeEffect);
-				component.__hooks._pendingEffects = [];
-			} catch (e) {
-				component.__hooks._pendingEffects = [];
-				options._catchError(e, component._vnode);
-			}
+	let component;
+	// sort the queue by depth (outermost to innermost)
+	afterPaintEffects.sort((a, b) => a._vnode._depth - b._vnode._depth);
+	while (component = afterPaintEffects.pop()) {
+		if (!component._parentDom) continue;
+		try {
+			component.__hooks._pendingEffects.forEach(invokeCleanup);
+			component.__hooks._pendingEffects.forEach(invokeEffect);
+			component.__hooks._pendingEffects = [];
+		} catch (e) {
+			component.__hooks._pendingEffects = [];
+			options._catchError(e, component._vnode);
 		}
-	});
-	afterPaintEffects = [];
+	}
 }
 
 let HAS_RAF = typeof requestAnimationFrame == 'function';