Unmount framework components when islands are destroyed (#8264)

* fix(view-transitions): update persistence logic for improved unmount behavior

* feat(astro): add `astro:unmount` event

* feat(vue): automatically unmount islands

* feat(react): automatically unmount islands

* feat(react): automatically unmount islands

* feat(solid): automatically dispose of islands

* feat(svelte): automatically destroy of islands

* feat(svelte): automatically destroy of islands

* feat(solid): automatically dispose of islands

* feat(preact): automatically unmount islands

* chore: update changeset

* fix: rebase issue

* chore: add clarifying comment

* chore: remove duplicate changeset

* chore: add changeset

1 files changed, 6 insertions, 5 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 });
 	};