From 9f601d9dce1826d80654d81bc57ddb2ae19c4f2f Mon Sep 17 00:00:00 2001
From: Brenley Dueck <brenleydueck@gmail.com>
Date: Wed, 24 Jun 2026 06:51:29 -0500
Subject: [PATCH 1/3] fix: claim late-streamed fragments in chained async memos
 during hydration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When a chained async memo (e.g. b = createMemo(() => fetchItems(m()))
where m reads a pending async memo a) recomputes after the shell finishes
hydrating (sharedConfig.hydrating flips to false) but before the Loading
boundary's fragment resume fires, readSerializedOrCompute would re-run the
compute function instead of subscribing to the server's serialized deferred
Promise. The new client-side Promise resolves after the resume window closes,
so the For renders with hydrating=false and creates a fresh node — orphaning
the server fragment that $df swaps in:

  "Hydration completed with 1 unclaimed server-rendered node(s):
   <div _hk=\"...\">item 1</div>"

Fix: track owners whose serialized value has been consumed via a WeakSet.
When hydrating is false but the owner's serialized key has not been consumed
yet, still read it so the memo subscribes to the server's deferred Promise
via handleAsync. The serialized value is only used once; subsequent
recomputes use compute(prev) normally.
---
 .../hydration/loading-late-fragment.spec.tsx  | 136 ++++++++++++++++++
 packages/solid/src/client/hydration.ts        |  17 ++-
 2 files changed, 151 insertions(+), 2 deletions(-)
 create mode 100644 packages/solid-web/test/hydration/loading-late-fragment.spec.tsx

diff --git a/packages/solid-web/test/hydration/loading-late-fragment.spec.tsx b/packages/solid-web/test/hydration/loading-late-fragment.spec.tsx
new file mode 100644
index 000000000..8e97cf384
--- /dev/null
+++ b/packages/solid-web/test/hydration/loading-late-fragment.spec.tsx
@@ -0,0 +1,136 @@
+/**
+ * @jsxImportSource @solidjs/web
+ * @vitest-environment jsdom
+ *
+ * Regression test: a <Loading> boundary whose streamed fragment arrives AFTER
+ * the shell has hydrated (chained async memos whose serialized values are not
+ * in the shell) must claim the late-streamed server node, not orphan it.
+ *
+ * Root cause: when a chained async memo (e.g. `b = createMemo(() => fetchItems(m()))`
+ * where `m` reads a pending async memo `a`) recomputes after `sharedConfig.hydrating`
+ * flips to false but before the boundary's fragment resume fires, the memo's
+ * `readSerializedOrCompute` would re-run its compute function (e.g. `fetchItems(...)`)
+ * instead of subscribing to the server's serialized deferred Promise. The new
+ * client-side Promise resolves after the resume window closes, so the For renders
+ * with `hydrating=false` and creates a fresh node — orphaning the server fragment
+ * that `$df` swapped in.
+ *   "Hydration completed with 1 unclaimed server-rendered node(s):
+ *    <div _hk="...">item 1</div>"
+ */
+import { describe, expect, test, vi, beforeEach, afterEach } from "vitest";
+import { createMemo, flush, Loading } from "solid-js";
+import { For, hydrate } from "@solidjs/web";
+
+function setupHydration() {
+  (globalThis as any)._$HY = { events: [], completed: new WeakSet(), r: {}, fe() {} };
+}
+
+const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
+const fetchItems = async (id: number) => {
+  await sleep(10);
+  return ["item " + id];
+};
+
+// Streamed chunks for `<Home />` with sleep(1000)-equivalent timing:
+//   shell  : boundary fallback + pending `3_fr` + pending `0` (a). key `2` (b)
+//            is NOT registered yet (b only serializes after a resolves).
+//   mid    : defines the resolver, resolves `0` -> [1], registers `2` (pending).
+//   late   : `<template id="3">` + `$df("3")` swap + resolves `2` and `3_fr`.
+const RESOLVER_FN =
+  "($R[6]=(resolver, data) => { resolver.s(data); resolver.p.s = 1; resolver.p.v = data; })";
+const DEFERRED =
+  '($R[2]=() => { const resolver = { p: 0, s: 0, f: 0 }; resolver.p = new Promise((resolve, reject) => { resolver.s = resolve; resolver.f = reject; }); return resolver; })';
+
+const SHELL =
+  `<template id="pl-3"></template><div _hk=30>loading</div><!--pl-3-->` +
+  `<script>(self.$R=self.$R||{})[""]=[];` +
+  `_$HY.r["0"]=$R[0]=($R[1]=${DEFERRED}()).p;` +
+  `_$HY.r["3_fr"]=$R[3]=($R[4]=${DEFERRED}()).p;` +
+  `</script>`;
+
+const MID =
+  `<script>${RESOLVER_FN}($R[1],$R[5]=[1]);` +
+  `_$HY.r["2"]=$R[7]=($R[8]=${DEFERRED}()).p;` +
+  `</script>`;
+
+const LATE_TEMPLATE = `<template id="3"><div _hk=300000>item 1</div></template>`;
+
+const LATE_SCRIPT =
+  `<script>$R[6]($R[8],$R[9]=["item 1"]);$df("3");` +
+  `function $df(e,n,o,t){if(!(n=document.getElementById(e))||!(o=document.getElementById("pl-"+e)))return 0;for(;o&&8!==o.nodeType&&o.nodeValue!=="pl-"+e;)t=o.nextSibling,o.remove(),o=t;_$HY.done?o.remove():o.replaceWith(n.content),n.remove(),_$HY.fe(e);return 1}` +
+  `;$R[6]($R[4],!0);</script>`;
+
+function applyChunk(container: HTMLDivElement, chunk: string, first: boolean) {
+  const scriptRe = /<script(?:[^>]*)>([\s\S]*?)<\/script>/g;
+  const scripts = [...chunk.matchAll(scriptRe)].map(m => m[1]);
+  const stripped = chunk.replace(scriptRe, "");
+  if (first) container.innerHTML = stripped;
+  else container.insertAdjacentHTML("beforeend", stripped);
+  for (const s of scripts) (0, eval)(s);
+}
+
+describe("Loading boundary — late-streamed fragment hydration (chained async memos)", () => {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  let dispose: (() => void) | undefined;
+
+  beforeEach(async () => {
+    if (dispose) dispose();
+    await new Promise(r => setTimeout(r, 0));
+    setupHydration();
+    container.innerHTML = "";
+  });
+
+  afterEach(() => {
+    if (dispose) {
+      dispose();
+      dispose = undefined;
+    }
+  });
+
+  function Home() {
+    const a = createMemo(async () => {
+      await sleep(10);
+      return [1];
+    });
+    const m = createMemo(() => a()[0]);
+    const b = createMemo(() => fetchItems(m()));
+    return (
+      <Loading fallback={<div>loading</div>}>
+        <For each={b()}>{(x) => <div>{x}</div>}</For>
+      </Loading>
+    );
+  }
+
+  test("streamed fragment is claimed on resume (no orphan)", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    // 1. shell (boundary fallback + pending 3_fr; b's key "2" not registered yet)
+    applyChunk(container, SHELL, true);
+    // 2. hydrate against the shell while the boundary fragment is still pending
+    dispose = hydrate(() => <Home />, container);
+    await Promise.resolve();
+    flush();
+    // 3. mid chunk: a resolves, b registered (pending)
+    applyChunk(container, MID, false);
+    await Promise.resolve();
+    flush();
+    // 4. late chunk: template + $df swap + resolve b and 3_fr
+    applyChunk(container, LATE_TEMPLATE, false);
+    applyChunk(container, LATE_SCRIPT, false);
+    await Promise.resolve();
+    await Promise.resolve();
+    flush();
+    await new Promise(r => setTimeout(r, 50));
+
+    // The server-rendered <div _hk=300000> should be claimed, not duplicated.
+    expect(container.querySelectorAll("div").length).toBe(1);
+    expect(container.textContent).toBe("item 1");
+
+    const orphanWarns = warn.mock.calls.filter(
+      (c: unknown[]) => typeof c[0] === "string" && c[0].includes("unclaimed server-rendered node")
+    );
+    expect(orphanWarns).toHaveLength(0);
+    warn.mockRestore();
+  });
+});
diff --git a/packages/solid/src/client/hydration.ts b/packages/solid/src/client/hydration.ts
index 9acb5ac27..0f9c94585 100644
--- a/packages/solid/src/client/hydration.ts
+++ b/packages/solid/src/client/hydration.ts
@@ -274,14 +274,27 @@ function readHydratedValue(initP: any, refresh: () => void) {
   return initP?.v ?? initP;
 }
 
+/** Track owners whose serialized value has been consumed (used once, then compute takes over). */
+const consumedSerialized = new WeakSet<object>();
+
 /** Shared “serialized init or run compute” path for memo/signal/optimistic/effect under hydration. */
 function readSerializedOrCompute(compute: (prev: any) => any, prev: any) {
-  if (!sharedConfig.hydrating) return compute(prev);
   const o = getOwner()!;
+  // Even after sharedConfig.hydrating flips to false, a memo whose serialized
+  // key arrived late (after the shell hydrated) hasn't consumed its server
+  // value yet. Use it now so the memo subscribes to the server's deferred
+  // Promise via handleAsync — otherwise the memo re-runs its compute function
+  // (e.g. fetchItems(...)), creating a NEW Promise that resolves after the
+  // Loading boundary's resume window closes, orphaning the server fragment.
+  if (!sharedConfig.hydrating && consumedSerialized.has(o)) return compute(prev);
   let initP: any;
   if (sharedConfig.has!(o.id!)) initP = sharedConfig.load!(o.id!);
   const init = readHydratedValue(initP, () => subFetch(compute, prev));
-  return init !== NO_HYDRATED_VALUE ? init : compute(prev);
+  if (init !== NO_HYDRATED_VALUE) {
+    consumedSerialized.add(o);
+    return init;
+  }
+  return compute(prev);
 }
 
 function forwardIteratorReturn(it: any, value?: any) {

From 0ff694d61878b1f5277510dc7951d8c0757cb5a9 Mon Sep 17 00:00:00 2001
From: Brenley Dueck <brenleydueck@gmail.com>
Date: Wed, 24 Jun 2026 06:52:00 -0500
Subject: [PATCH 2/3] chore: add changeset for loading late-fragment hydration
 fix

---
 .changeset/fix-loading-late-fragment-hydration.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fix-loading-late-fragment-hydration.md

diff --git a/.changeset/fix-loading-late-fragment-hydration.md b/.changeset/fix-loading-late-fragment-hydration.md
new file mode 100644
index 000000000..158eae6f9
--- /dev/null
+++ b/.changeset/fix-loading-late-fragment-hydration.md
@@ -0,0 +1,5 @@
+---
+"solid-js": patch
+---
+
+fix late-streamed fragment orphaning when a chained async memo recomputes after the shell finishes hydrating

From fd8fcebc688353720a736f25b8d22df39083c54d Mon Sep 17 00:00:00 2001
From: Brenley Dueck <brenleydueck@gmail.com>
Date: Wed, 24 Jun 2026 06:52:40 -0500
Subject: [PATCH 3/3] style: prettier-format loading-late-fragment test

---
 .../solid-web/test/hydration/loading-late-fragment.spec.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/solid-web/test/hydration/loading-late-fragment.spec.tsx b/packages/solid-web/test/hydration/loading-late-fragment.spec.tsx
index 8e97cf384..c9d4aeda3 100644
--- a/packages/solid-web/test/hydration/loading-late-fragment.spec.tsx
+++ b/packages/solid-web/test/hydration/loading-late-fragment.spec.tsx
@@ -25,7 +25,7 @@ function setupHydration() {
   (globalThis as any)._$HY = { events: [], completed: new WeakSet(), r: {}, fe() {} };
 }
 
-const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
+const sleep = (ms: number) => new Promise(r => setTimeout(r, ms));
 const fetchItems = async (id: number) => {
   await sleep(10);
   return ["item " + id];
@@ -39,7 +39,7 @@ const fetchItems = async (id: number) => {
 const RESOLVER_FN =
   "($R[6]=(resolver, data) => { resolver.s(data); resolver.p.s = 1; resolver.p.v = data; })";
 const DEFERRED =
-  '($R[2]=() => { const resolver = { p: 0, s: 0, f: 0 }; resolver.p = new Promise((resolve, reject) => { resolver.s = resolve; resolver.f = reject; }); return resolver; })';
+  "($R[2]=() => { const resolver = { p: 0, s: 0, f: 0 }; resolver.p = new Promise((resolve, reject) => { resolver.s = resolve; resolver.f = reject; }); return resolver; })";
 
 const SHELL =
   `<template id="pl-3"></template><div _hk=30>loading</div><!--pl-3-->` +
@@ -97,7 +97,7 @@ describe("Loading boundary — late-streamed fragment hydration (chained async m
     const b = createMemo(() => fetchItems(m()));
     return (
       <Loading fallback={<div>loading</div>}>
-        <For each={b()}>{(x) => <div>{x}</div>}</For>
+        <For each={b()}>{x => <div>{x}</div>}</For>
       </Loading>
     );
   }