From ad10b346e293192f50741b8cd9673b8a77fc4dfc Mon Sep 17 00:00:00 2001
From: Bernie Reiter <ockham@raz.or.at>
Date: Mon, 8 Aug 2022 16:32:22 +0200
Subject: [PATCH] Unmount react component when WpBlock is disconnected

---
 assets/js/base/utils/bhe-frontend.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/assets/js/base/utils/bhe-frontend.tsx b/assets/js/base/utils/bhe-frontend.tsx
index 318f02ce468..649d55a7847 100644
--- a/assets/js/base/utils/bhe-frontend.tsx
+++ b/assets/js/base/utils/bhe-frontend.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { ReactElement } from 'react';
+import { unmountComponentAtNode } from 'react-dom';
 
 /**
  * Internal dependencies
@@ -150,6 +151,11 @@ class WpBlock extends HTMLElement {
 			);
 		} );
 	}
+
+	disconnectedCallback() {
+		// Unmount the React component, running callbacks and cleaning up its state.
+		unmountComponentAtNode( this );
+	}
 }
 
 // We need to wrap the element registration code in a conditional for the same