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, 7 insertions, 3 deletions

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 });
 		});
 	};