From a4afa5dc966aee72b728b560a13cd38af3762d7a Mon Sep 17 00:00:00 2001 From: Aleksej Date: Thu, 21 Sep 2023 17:04:14 +0200 Subject: [PATCH] Fix tooltip view double trigger. --- .../KeyMetrics/KeyMetricsSetupCTAWidget.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/assets/js/components/KeyMetrics/KeyMetricsSetupCTAWidget.js b/assets/js/components/KeyMetrics/KeyMetricsSetupCTAWidget.js index 21af97fa47d..dd15db1ebf9 100644 --- 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 (