From da517d4055825ee1b630cd4a6983818d6120a7b7 Mon Sep 17 00:00:00 2001
From: Robin Neal <howdy@robinneal.co.uk>
Date: Mon, 14 Aug 2023 17:26:03 +0100
Subject: [PATCH] fix: remove react identifierPrefix from client:only (#8075)

This was causing React components rendered with client:only
to be prefixed with null. While not technically causing any
issues, it is unintended and could be considered a bug.

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
---
 .changeset/thin-plums-drop.md                 |  5 +++++
 .../react-component/src/components/WithId.jsx |  6 ++++++
 .../react-component/src/pages/index.astro     |  7 +++++++
 packages/astro/e2e/react-component.test.js    | 19 +++++++++++++++++++
 packages/integrations/react/client.js         |  2 +-
 5 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/thin-plums-drop.md
 create mode 100644 packages/astro/e2e/fixtures/react-component/src/components/WithId.jsx

diff --git a/.changeset/thin-plums-drop.md b/.changeset/thin-plums-drop.md
new file mode 100644
index 0000000000..ab3fb875aa
--- /dev/null
+++ b/.changeset/thin-plums-drop.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/react': patch
+---
+
+fix a bug where react identifierPrefix was set to null for client:only components causing React.useId to generate ids prefixed with null
diff --git a/packages/astro/e2e/fixtures/react-component/src/components/WithId.jsx b/packages/astro/e2e/fixtures/react-component/src/components/WithId.jsx
new file mode 100644
index 0000000000..0abe91c727
--- /dev/null
+++ b/packages/astro/e2e/fixtures/react-component/src/components/WithId.jsx
@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default function () {
+	const id = React.useId();
+  return <p className='react-use-id' id={id}>{id}</p>;
+}
diff --git a/packages/astro/e2e/fixtures/react-component/src/pages/index.astro b/packages/astro/e2e/fixtures/react-component/src/pages/index.astro
index f9e0ae3958..a3a0a4c1f0 100644
--- a/packages/astro/e2e/fixtures/react-component/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/react-component/src/pages/index.astro
@@ -2,6 +2,7 @@
 import Counter from '../components/Counter.jsx';
 import ReactComponent from '../components/JSXComponent.jsx';
 import Suffix from '../components/Suffix.react';
+import WithId from '../components/WithId.jsx';
 
 const someProps = {
 	count: 0,
@@ -36,5 +37,11 @@ const someProps = {
 		<ReactComponent id="client-only" client:only="react" />
 
 		<Suffix client:load />
+
+		<WithId />
+		<WithId client:load />
+		<WithId client:load />
+		<WithId client:only="react" />
+		<WithId client:only="react" />
 	</body>
 </html>
diff --git a/packages/astro/e2e/react-component.test.js b/packages/astro/e2e/react-component.test.js
index 00d747079a..2d205fc5b8 100644
--- a/packages/astro/e2e/react-component.test.js
+++ b/packages/astro/e2e/react-component.test.js
@@ -34,3 +34,22 @@ test.describe('dev', () => {
 		expect(await suffix.textContent()).toBe('suffix toggle true');
 	});
 });
+
+test.describe('React client id generation', () => {
+	test('react components generate unique ids', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const components = page.locator('.react-use-id');
+		await expect(components).toHaveCount(5);
+		const staticId = await components.nth(0).getAttribute('id');
+		const hydratedId0 = await components.nth(1).getAttribute('id');
+		const hydratedId1 = await components.nth(2).getAttribute('id');
+		const clientOnlyId0 = await components.nth(3).getAttribute('id');
+		const clientOnlyId1 = await components.nth(4).getAttribute('id');
+		console.log("ho ho", staticId, hydratedId0, hydratedId1, clientOnlyId0, clientOnlyId1)
+		expect(staticId).not.toEqual(hydratedId0)
+		expect(hydratedId0).not.toEqual(hydratedId1)
+		expect(hydratedId1).not.toEqual(clientOnlyId0)
+		expect(clientOnlyId0).not.toEqual(clientOnlyId1)
+	});
+})
diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js
index ef5929af13..d8948e7bb7 100644
--- a/packages/integrations/react/client.js
+++ b/packages/integrations/react/client.js
@@ -31,7 +31,7 @@ export default (element) =>
 		}
 		if (client === 'only') {
 			return startTransition(() => {
-				createRoot(element, renderOptions).render(componentEl);
+				createRoot(element).render(componentEl);
 			});
 		}
 		return startTransition(() => {