2 files changed, 13 insertions, 8 deletions
diff --git a/packages/integrations/react/client-v17.js b/packages/integrations/react/client-v17.js
index 443109603..70bddc353 100644
--- a/packages/integrations/react/client-v17.js
+++ b/packages/integrations/react/client-v17.js
@@ -1,5 +1,5 @@
 import { createElement } from 'react';
-import { render, hydrate } from 'react-dom';
+import { render, hydrate, unmountComponentAtNode } from 'react-dom';
 import StaticHtml from './static-html.js';
 
 export default (element) =>
@@ -12,8 +12,9 @@ export default (element) =>
 			props,
 			children != null ? createElement(StaticHtml, { value: children }) : children
 		);
-		if (client === 'only') {
-			return render(componentEl, element);
-		}
-		return hydrate(componentEl, element);
+
+		const isHydrate = client !== 'only';
+		const bootstrap = isHydrate ? hydrate : render;
+		bootstrap(componentEl, element);
+		element.addEventListener('astro:unmount', () => unmountComponentAtNode(element), { once: true });
 	};
diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js
index d8948e7bb..dbd32c0c5 100644
--- a/packages/integrations/react/client.js
+++ b/packages/integrations/react/client.js
@@ -31,10 +31,14 @@ export default (element) =>
 		}
 		if (client === 'only') {
 			return startTransition(() => {
-				createRoot(element).render(componentEl);
+				const root = createRoot(element);
+				root.render(componentEl);
+				element.addEventListener('astro:unmount', () => root.unmount(), { once: true });
 			});
 		}
-		return startTransition(() => {
-			hydrateRoot(element, componentEl, renderOptions);
+		startTransition(() => {
+			const root = hydrateRoot(element, componentEl, renderOptions);
+			root.render(componentEl);
+			element.addEventListener('astro:unmount', () => root.unmount(), { once: true });
 		});
 	};