Allow islands to be re-rendered with new props on page transition (#10136)

* Allow islands to be re-rendered with new props on page transition

* Adjust the expected styles

* Restore test expectation

* Add changeset and final change

* linting

* Implement transition:persist-props behavior

* Fix lockfile

* Fix expectations

* App is hyrid

* Update .changeset/lovely-nails-cough.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update .changeset/lovely-nails-cough.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update .changeset/lovely-nails-cough.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

---------

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

1 files changed, 21 insertions, 4 deletions

diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js
index 90e4ceb83..cfe46a919 100644
--- a/packages/integrations/react/client.js
+++ b/packages/integrations/react/client.js
@@ -53,6 +53,17 @@ function getChildren(childString, experimentalReactChildren) {
 	}
 }
 
+// Keep a map of roots so we can reuse them on re-renders
+let rootMap = new WeakMap();
+const getOrCreateRoot = (element, creator) => {
+	let root = rootMap.get(element);
+	if(!root) {
+		root = creator();
+		rootMap.set(element, root);
+	}
+	return root;
+};
+
 export default (element) =>
 	(Component, props, { default: children, ...slotted }, { client }) => {
 		if (!element.hasAttribute('ssr')) return;
@@ -75,14 +86,20 @@ export default (element) =>
 		}
 		if (client === 'only') {
 			return startTransition(() => {
-				const root = createRoot(element);
+				const root = getOrCreateRoot(element, () => {
+					const r = createRoot(element);
+					element.addEventListener('astro:unmount', () => r.unmount(), { once: true });
+					return r;
+				});
 				root.render(componentEl);
-				element.addEventListener('astro:unmount', () => root.unmount(), { once: true });
 			});
 		}
 		startTransition(() => {
-			const root = hydrateRoot(element, componentEl, renderOptions);
+			const root = getOrCreateRoot(element, () => {
+				const r = hydrateRoot(element, componentEl, renderOptions);
+				element.addEventListener('astro:unmount', () => r.unmount(), { once: true });
+				return r;
+			});
 			root.render(componentEl);
-			element.addEventListener('astro:unmount', () => root.unmount(), { once: true });
 		});
 	};