Stepper: Ensure calypso_signup_start doesn't get recorded over and …

…over / 50 times (#95028)

client/landing/stepper/declarative-flow/internals/hooks/use-sign-up-start-tracking/index.tsx

@@ -46,9 +46,11 @@ export const useSignUpStartTracking = ( { flow }: Props ) => {
 		adTrackSignupStart( flowName );
 	}, [ isSignupFlow, flowName ] );
 
-	if ( ! isSignupFlow ) {
-		return;
-	}
+	useEffect( () => {
+		if ( ! isSignupFlow ) {
+			return;
+		}
 
-	recordSignupStart( { flow: flowName, ref, optionalProps: extraProps || {} } );
+		recordSignupStart( { flow: flowName, ref, optionalProps: extraProps || {} } );
+	}, [ isSignupFlow, flowName, ref, extraProps ] );
 };

client/landing/stepper/declarative-flow/internals/hooks/use-sign-up-start-tracking/test/index.tsx

@@ -117,6 +117,29 @@ describe( 'useSignUpTracking', () => {
 			} );
 		} );
 
+		it( 'records the calypso_signup_start event a single time if dependencies are stable', () => {
+			const { rerender } = render( {
+				flow: {
+					...signUpFlow,
+				} satisfies Flow,
+			} );
+
+			rerender();
+			expect( recordSignupStart ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'records the calypso_signup_start event multiple times when dependencies change', () => {
+			const { rerender } = render( {
+				flow: {
+					...signUpFlow,
+					useSignupStartEventProps: () => ( { extra: 'props' } ),
+				} satisfies Flow,
+			} );
+
+			rerender();
+			expect( recordSignupStart ).toHaveBeenCalledTimes( 2 );
+		} );
+
 		it( 'sets the signup-start timer only on initial mount (assuming static flowName and isSignupFlow)', () => {
 			const { rerender } = render( {
 				flow: {