Block Editor: Fix is-hovered event listener (#28715)

* Avoid excessive reassignment of hover event handlers
WordPress · Feb 11, 2021 · 5973db4 · 5973db4
1 parent 1a29dbd
commit 5973db4
Showing 1 changed file with 28 additions and 18 deletions.
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js b/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js
@@ -33,31 +33,41 @@ export function useIsHovered( ref ) {
 		};
 	}, [] );
 
-	useEffect( () => {
-		function addListener( eventType, value ) {
-			function listener( event ) {
-				if ( event.defaultPrevented ) {
-					return;
-				}
-
-				event.preventDefault();
-				setHovered( value );
+	function addHoverListener( eventType, value ) {
+		function listener( event ) {
+			if ( event.defaultPrevented ) {
+				return;
 			}
 
-			ref.current.addEventListener( eventType, listener );
-			return () => {
-				ref.current.removeEventListener( eventType, listener );
-			};
+			event.preventDefault();
+			setHovered( value );
 		}
 
-		if ( isHovered ) {
-			return addListener( 'mouseout', false );
-		}
+		ref.current.addEventListener( eventType, listener );
+		return [ eventType, listener ];
+	}
+
+	function addHoverListeners() {
+		const hoverListeners = [];
+
+		hoverListeners.push( addHoverListener( 'mouseout', false ) );
 
 		if ( isOutlineMode || isNavigationMode ) {
-			return addListener( 'mouseover', true );
+			hoverListeners.push( addHoverListener( 'mouseover', true ) );
 		}
-	}, [ isNavigationMode, isOutlineMode, isHovered, setHovered ] );
+
+		return hoverListeners;
+	}
+
+	useEffect( () => {
+		const hoverListeners = addHoverListeners();
+
+		return () => {
+			hoverListeners.forEach( ( [ eventType, listener ] ) =>
+				ref.current.removeEventListener( eventType, listener )
+			);
+		};
+	}, [ isOutlineMode, isNavigationMode ] );
 
 	return isHovered;
 }