Return cleanup function in useEffect

Automattic · May 6, 2021 · 5b2980c · 5b2980c
1 parent c813036
commit 5b2980c
Showing 1 changed file with 24 additions and 30 deletions.
diff --git a/client/payment-request/blocks/use-initialization.js b/client/payment-request/blocks/use-initialization.js
@@ -102,36 +102,30 @@ export const useInitialization = ( {
 
 	// Whenever paymentRequest changes, hook in event listeners.
 	useEffect( () => {
-		if ( paymentRequest ) {
-			// Remove all previously added event listeners first.
-			paymentRequest.removeAllListeners();
-
-			const cancelHandler = () => {
-				setIsFinished( false );
-				setIsProcessing( false );
-				setPaymentRequest( null );
-				onClose();
-			};
-
-			paymentRequest.on( 'shippingaddresschange', ( event ) =>
-				shippingAddressChangeHandler( api, event )
-			);
-
-			paymentRequest.on( 'shippingoptionchange', ( event ) =>
-				shippingOptionChangeHandler( api, event )
-			);
-
-			paymentRequest.on( 'paymentmethod', ( event ) =>
-				paymentMethodHandler(
-					api,
-					completePayment,
-					abortPayment,
-					event
-				)
-			);
-
-			paymentRequest.on( 'cancel', cancelHandler );
-		}
+		const cancelHandler = () => {
+			setIsFinished( false );
+			setIsProcessing( false );
+			setPaymentRequest( null );
+			onClose();
+		};
+
+		paymentRequest?.on( 'shippingaddresschange', ( event ) =>
+			shippingAddressChangeHandler( api, event )
+		);
+
+		paymentRequest?.on( 'shippingoptionchange', ( event ) =>
+			shippingOptionChangeHandler( api, event )
+		);
+
+		paymentRequest?.on( 'paymentmethod', ( event ) =>
+			paymentMethodHandler( api, completePayment, abortPayment, event )
+		);
+
+		paymentRequest?.on( 'cancel', cancelHandler );
+
+		return () => {
+			paymentRequest?.removeAllListeners();
+		};
 	}, [ paymentRequest ] );
 
 	return {