Merge pull request #7614 from google/enhancement/7544-follow-up

Fix tooltip view double trigger (Follow Up).
google · Sep 21, 2023 · 2761e40 · 2761e40
2 parents 7cc244c + a4afa5d
commit 2761e40
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/assets/js/components/KeyMetrics/KeyMetricsSetupCTAWidget.js b/assets/js/components/KeyMetrics/KeyMetricsSetupCTAWidget.js
@@ -20,12 +20,13 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import { useMount } from 'react-use';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Fragment, useCallback, useEffect, useState } from '@wordpress/element';
+import { Fragment, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -113,14 +114,14 @@ function KeyMetricsSetupCTAWidget( { Widget, WidgetNull } ) {
 		);
 	}, [ viewContext ] );
 
-	const [ hasBeenInView, setHasBeenInView ] = useState( false );
-
-	useEffect( () => {
-		if ( isTooltipVisible && ! hasBeenInView ) {
+	useMount( () => {
+		// Since components are conditionally rendered, when tooltip
+		// appears, old component will unmount and new componnet will mount,
+		// with tooltip visible equal to true, so here we ensure event is sent only once when that occurs,
+		if ( isTooltipVisible ) {
 			trackEvent( `${ viewContext }_kmw`, 'tooltip_view' );
-			setHasBeenInView( true );
 		}
-	}, [ isTooltipVisible, viewContext, hasBeenInView, setHasBeenInView ] );
+	} );
 
 	if ( isTooltipVisible ) {
 		return (