Fixes bug where Astro can't distinguish between two equal components differing only by props when hydrating (#846)

2 files changed, 7 insertions, 1 deletions

diff --git a/.changeset/chilly-gorillas-wash.md b/.changeset/chilly-gorillas-wash.md
new file mode 100644
index 000000000..543006def
--- /dev/null
+++ b/.changeset/chilly-gorillas-wash.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+This includes the props passed to a hydration component when generating the hash/id. This prevents multiple instances of the same component with differing props to be treated as the same component when hydrated by Astro.
diff --git a/packages/astro/src/internal/__astro_component.ts b/packages/astro/src/internal/__astro_component.ts
index 1ddd40b05..9470e5b14 100644
--- a/packages/astro/src/internal/__astro_component.ts
+++ b/packages/astro/src/internal/__astro_component.ts
@@ -187,7 +187,8 @@ export function __astro_component(Component: any, metadata: AstroComponentMetada
     }
 
     // If we ARE hydrating this component, let's generate the hydration script
-    const astroId = hash.unique(html);
+    const stringifiedProps = JSON.stringify(props);
+    const astroId = hash.unique(html + stringifiedProps);
     const script = await generateHydrateScript({ instance, astroId, props }, metadata as Required<AstroComponentMetadata>);
     const astroRoot = `<astro-root uid="${astroId}">${html}</astro-root>`;
     return [astroRoot, script].join('\n');