Fix all review memory leak on block transform (https://github.com/woocommerce/woocommerce-blocks/pull/4428)

plugins/woocommerce-blocks/assets/js/base/hocs/with-reviews.js

@@ -47,6 +47,8 @@ const withReviews = ( OriginalComponent ) => {
 
 		delayedAppendReviews = this.props.delayFunction( this.appendReviews );
 
+		isMounted = false;
+
 		state = {
 			error: null,
 			loading: true,
@@ -57,6 +59,7 @@ const withReviews = ( OriginalComponent ) => {
 		};
 
 		componentDidMount() {
+			this.isMounted = true;
 			this.replaceReviews();
 		}
 
@@ -80,7 +83,9 @@ const withReviews = ( OriginalComponent ) => {
 			);
 		}
 
-		componentWillUnMount() {
+		componentWillUnmount() {
+			this.isMounted = false;
+
 			if ( this.delayedAppendReviews.cancel ) {
 				this.delayedAppendReviews.cancel();
 			}
@@ -120,7 +125,6 @@ const withReviews = ( OriginalComponent ) => {
 			}
 
 			const { onReviewsReplaced } = this.props;
-
 			this.updateListOfReviews().then( onReviewsReplaced );
 		}
 
@@ -158,16 +162,19 @@ const withReviews = ( OriginalComponent ) => {
 						reviews: newReviews,
 						totalReviews: newTotalReviews,
 					} ) => {
+						if ( this.isMounted ) {
 							this.setState( {
 								reviews: oldReviews
 									.filter(
-									( review ) => Object.keys( review ).length
+										( review ) =>
+											Object.keys( review ).length
 									)
 									.concat( newReviews ),
 								totalReviews: newTotalReviews,
 								loading: false,
 								error: null,
 							} );
+						}
 
 						return { newReviews };
 					}
@@ -176,6 +183,9 @@ const withReviews = ( OriginalComponent ) => {
 		}
 
 		setError = async ( e ) => {
+			if ( ! this.isMounted ) {
+				return;
+			}
 			const { onReviewsLoadError } = this.props;
 			const error = await formatError( e );