fix(react): Fix empty conditional slots hydration issues (#15378)

dmgawel · Princesseuh · web-flow · commit a8a926eecc2f · 2026-03-25T01:08:57.000+01:00
* fix(react): Fix empty conditional slots hydration issues

* add changeset

* typo in changeset

* Update nine-lights-rest.md

---------

Co-authored-by: Erika &lt;3019731+Princesseuh@users.noreply.github.com&gt;
diff --git a/.changeset/nine-lights-rest.md b/.changeset/nine-lights-rest.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/react': patch
+---
+
+Fix React hydration errors when using conditional slot rendering
diff --git a/packages/integrations/react/src/static-html.ts b/packages/integrations/react/src/static-html.ts
@@ -16,7 +16,8 @@ const StaticHtml = ({
 	name?: string;
 	hydrate?: boolean;
 }) => {
-	if (!value) return null;
+	// value can be a SlotString object, we need to check if it's empty by using trim()
+	if (value == null || value.trim() === '') return null;
 	const tagName = hydrate ? 'astro-slot' : 'astro-static-slot';
 	return h(tagName, {
 		name,
diff --git a/packages/integrations/react/test/fixtures/react-component/src/components/ConditionalSlot.jsx b/packages/integrations/react/test/fixtures/react-component/src/components/ConditionalSlot.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function ({ id, conditional = null }) {
+	return (
+		<div id={id}>
+			<div className="conditional-slot">{conditional}</div>
+		</div>
+	);
+}
diff --git a/packages/integrations/react/test/fixtures/react-component/src/pages/slots.astro b/packages/integrations/react/test/fixtures/react-component/src/pages/slots.astro
@@ -0,0 +1,21 @@
+---
+import ConditionalSlot from '../components/ConditionalSlot.jsx';
+
+const showEmptySlot = false;
+const showFilledSlot = true;
+---
+
+<html>
+	<head>
+		<title>Slots</title>
+	</head>
+	<body>
+		<ConditionalSlot id="empty" client:load>
+			{showEmptySlot ? <span slot="conditional">Hidden</span> : null}
+		</ConditionalSlot>
+
+		<ConditionalSlot id="filled" client:load>
+			{showFilledSlot ? <span slot="conditional">Visible</span> : null}
+		</ConditionalSlot>
+	</body>
+</html>
diff --git a/packages/integrations/react/test/react-component.test.js b/packages/integrations/react/test/react-component.test.js
@@ -130,6 +130,15 @@ describe('React Components', () => {
 			assert.equal($('#three .title').text(), 'Hello');
 			assert.equal($('#three .subtitle').text(), 'World');
 		});
+
+		it('Does not render astro-slot for empty slots', async () => {
+			const html = await fixture.readFile('/slots/index.html');
+			const $ = cheerioLoad(html);
+
+			assert.equal($('#empty astro-slot[name="conditional"]').length, 0);
+			assert.equal($('#filled astro-slot[name="conditional"]').length, 1);
+			assert.equal($('#filled astro-slot[name="conditional"]').text().trim(), 'Visible');
+		});
 	});
 
 	if (isWindows) return;

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@astrojs/react': patch
 +---
++
 +Fix React hydration errors when using conditional slot rendering