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 <[email protected]>

.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

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

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>

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

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(() => {