From 86089b00312aa90c703b43f04c41deee9067a1aa Mon Sep 17 00:00:00 2001
From: "andrii.holubenko" <andrii.holubenko@gr8.tech>
Date: Fri, 28 Aug 2026 13:41:55 +0200
Subject: [PATCH 1/2] fix(core): keep the identity of a headless component's
 output around the useOn placeholder

---
 .changeset/lucky-moons-remount.md             |  40 ++++
 .../src/core/shared/component-execution.ts    |  67 +++---
 .../src/core/tests/use-visible-task.spec.tsx  | 216 +++++++++++++++++-
 3 files changed, 290 insertions(+), 33 deletions(-)
 create mode 100644 .changeset/lucky-moons-remount.md

diff --git a/.changeset/lucky-moons-remount.md b/.changeset/lucky-moons-remount.md
new file mode 100644
index 00000000000..851b41200fb
--- /dev/null
+++ b/.changeset/lucky-moons-remount.md
@@ -0,0 +1,40 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: a component which renders no DOM element of its own and registers a document or window `useOn`
+event - `useVisibleTask$` among them - no longer destroys everything it rendered on every re-render,
+and no longer loses that event on some outputs.
+
+Such a component gets a placeholder `<script>` to hang the listener on. Four problems came from how
+that placeholder was added to the output:
+
+- The output was wrapped together with the placeholder in a fragment without a key, and a new
+  wrapper was built on every render. Fragments without a key are never matched against the existing
+  tree, so the wrapper, every component below it and their DOM were re-created on every render,
+  losing their state. After SSR the whole subtree was rebuilt on resume.
+- A component returning a list of nodes lost the placeholder unless the first item happened to be a
+  fragment, because the wrapped result was discarded. Its `useVisibleTask$` never ran after resume.
+- A component returning a signal, a promise or anything which is not a node or a fragment lost the
+  placeholder for the same reason.
+- The placeholder was pushed into the node the component returned. A component returning a node it
+  does not rebuild - a hoisted or shared piece of JSX - had that node modified for good, and every
+  other component returning the same node then rendered a stray `<script>` carrying the first
+  component's task.
+
+Whatever such a component returns is now placed, together with the placeholder, in a single fragment
+which carries a stable key, and the returned node itself is never written to. The identity of the
+output no longer depends on its shape, so a component which returns a single node on one render and
+a list on the next keeps its children instead of rebuilding them.
+
+Two behaviour changes come with that:
+
+- A component returning a list is now rendered inside that fragment, one level deeper than before,
+  with the placeholder as the last child of it. `qinit` handlers run in document order, so a list
+  whose first item was a fragment used to run the parent's task before the tasks of the components
+  inside the list; it now runs after them, which is what a component with a single root has always
+  done.
+- A fragment returned without a key by such a component is given the wrapper key, so it is matched
+  across re-renders like every other output. The same component without a document or window `useOn`
+  event still gets a new fragment on every render, because unkeyed fragments are deliberately never
+  matched by `expectVirtual`.
diff --git a/packages/qwik/src/core/shared/component-execution.ts b/packages/qwik/src/core/shared/component-execution.ts
index f7dc1088835..6d50f8ad4f4 100644
--- a/packages/qwik/src/core/shared/component-execution.ts
+++ b/packages/qwik/src/core/shared/component-execution.ts
@@ -25,7 +25,7 @@ import {
   USE_ON_LOCAL_SEQ_IDX,
 } from './utils/markers';
 import { MAX_RETRY_ON_PROMISE_COUNT, isPromise, maybeThen, safeCall } from './utils/promises';
-import { isArray, isPrimitiveOrNullUndefined, type ValueOrPromise } from './utils/types';
+import { isArray, type ValueOrPromise } from './utils/types';
 import { getSubscriber } from '../reactive-primitives/subscriber';
 import { EffectProperty } from '../reactive-primitives/types';
 import { EventNameHtmlScope, getEventDataFromHtmlAttribute } from './utils/event-names';
@@ -334,47 +334,56 @@ function findFirstElementNode(jsx: JSXOutput): ValueOrPromise<JSXNodeInternal<st
   return null;
 }
 
+/**
+ * Key of the fragment which wraps a headless component's output together with its `useOn`
+ * placeholder `<script>`.
+ *
+ * The wrapper is re-created on every render of the component, so it needs a stable identity.
+ * Unkeyed fragments are intentionally never matched by `expectVirtual`, which would tear down and
+ * re-create the whole subtree - and with it every component instance below it - on every
+ * re-render.
+ */
+const PLACEHOLDER_FRAGMENT_KEY = ':useOn';
+
 /**
  * Injects a placeholder <script> element into the JSX output.
  *
  * This is necessary for headless components (components that don't render a real DOM element) to
  * have an anchor point for `useOn` event listeners that target the document or window.
  *
- * @param jsx The JSX output to modify.
+ * The placeholder has to end up in the output for every shape a component can return, and it must
+ * not change the identity of what the component rendered, because this runs on every render.
+ *
+ * @param jsx The JSX output to wrap.
  * @param placeholder The placeholder element to inject.
- * @returns The modified JSX output.
+ * @returns The JSX output containing the placeholder.
  */
 function injectPlaceholderElement(jsx: JSXOutput, placeholder: JSXNodeInternal<string>): JSXOutput {
-  // For regular JSX nodes, we can append the placeholder to its children.
-  if (isJSXNode(jsx)) {
-    // Inline components may ignore children, while component$ children become projections.
-    if (jsx.type !== Fragment) {
-      return _jsxSorted(Fragment, null, null, [jsx, placeholder], 0, null);
-    }
-
-    if (jsx.children == null) {
-      jsx.children = placeholder;
-    } else if (isArray(jsx.children)) {
-      jsx.children.push(placeholder);
-    } else {
-      jsx.children = [jsx.children, placeholder];
-    }
-    return jsx;
+  // Arrays share the stable wrapper without mutating caller-owned output.
+  if (isArray(jsx)) {
+    return _jsxSorted(Fragment, null, null, [...jsx, placeholder], 0, PLACEHOLDER_FRAGMENT_KEY);
   }
 
-  // For primitives, we can't add children, so we wrap them in a fragment.
-  if (isPrimitiveOrNullUndefined(jsx)) {
-    return _jsxSorted(Fragment, null, null, [jsx, placeholder], 0, null);
-  }
-
-  // For an array of nodes, we inject the placeholder into the first element.
-  if (isArray(jsx) && jsx.length > 0) {
-    injectPlaceholderElement(jsx[0], placeholder);
-    return jsx;
+  // Preserve user keys; stabilize unkeyed fragments without mutating input.
+  if (isJSXNode(jsx) && jsx.type === Fragment) {
+    const children =
+      jsx.children == null ? [] : isArray(jsx.children) ? jsx.children : [jsx.children];
+    return _jsxSorted(
+      Fragment,
+      jsx.varProps,
+      jsx.constProps,
+      [...children, placeholder],
+      jsx.flags,
+      jsx.key ?? PLACEHOLDER_FRAGMENT_KEY,
+      jsx.dev
+    );
   }
 
-  // For anything else we do nothing.
-  return jsx;
+  // Everything else - a component, an element, text, a signal, a promise, nothing at all - cannot
+  // take the placeholder as a child, so it is wrapped in a fragment together with it. Inline
+  // components may ignore children, and `component$` children become projections, so appending to
+  // the node itself is not an option.
+  return _jsxSorted(Fragment, null, null, [jsx, placeholder], 0, PLACEHOLDER_FRAGMENT_KEY);
 }
 
 /** @returns An empty <script> element for adding qwik metadata attributes to */
diff --git a/packages/qwik/src/core/tests/use-visible-task.spec.tsx b/packages/qwik/src/core/tests/use-visible-task.spec.tsx
index 3901ca23653..a374636b72b 100644
--- a/packages/qwik/src/core/tests/use-visible-task.spec.tsx
+++ b/packages/qwik/src/core/tests/use-visible-task.spec.tsx
@@ -32,10 +32,16 @@ import { ErrorProvider } from '../../testing/rendering.unit-util';
 import { vnode_getProp } from '../client/vnode-utils';
 import { USE_ON_LOCAL } from '../shared/utils/markers';
 import { Task, TaskFlags } from '../use/use-task';
+import type { JSXNodeInternal, JSXOutput } from '../shared/jsx/types/jsx-node';
 
 const debug = false; //true;
 Error.stackTraceLimit = 100;
 
+/** A function call is left eager by the optimizer, so reading a signal through it re-renders. */
+function stringify(value: unknown) {
+  return `v${value}`;
+}
+
 export function useDelay(value: string) {
   const ready = useSignal('---');
   useVisibleTask$(() => {
@@ -279,6 +285,29 @@ describe.each([
     );
   });
 
+  it('should trigger in empty components returning a list of components', async () => {
+    const Child = component$(() => <span>child</span>);
+    const Cmp = component$(() => {
+      const signal = useSignal('empty');
+      useVisibleTask$(() => {
+        signal.value = 'run';
+      });
+      return [<Child key="1" />, <Child key="2" />, signal.value];
+    });
+    const { document } = await render(<Cmp />, { debug });
+    if (render === ssrRenderToDom) {
+      await trigger(document.body, 'script', 'd:qinit');
+    }
+    // the placeholder is the anchor for the visible task, so it has to be rendered
+    const anchors = document.querySelectorAll('script[q-d\\:qinit]');
+    expect(anchors.length).toBe(1);
+    if (render === ssrRenderToDom) {
+      // the attribute must hold the qrl itself (chunk#symbol) - an empty one loads nothing
+      expect(anchors[0].getAttribute('q-d:qinit')).toContain('#');
+    }
+    expect(document.body.textContent).toContain('run');
+  });
+
   it('should trigger in empty components array', async () => {
     const Cmp = component$(() => {
       const signal = useSignal('empty');
@@ -291,15 +320,18 @@ describe.each([
     if (render === ssrRenderToDom) {
       await trigger(document.body, 'script', 'd:qinit');
     }
+    // the placeholder joins the list as a sibling inside the stable wrapper
     expect(vNode).toMatchVDOM(
       <Component ssr-required>
         <Fragment ssr-required>
-          <Signal ssr-required>{'run'}</Signal>
+          <Fragment ssr-required>
+            <Signal ssr-required>{'run'}</Signal>
+          </Fragment>
+          <Fragment ssr-required>
+            <Signal ssr-required>{'run'}</Signal>
+          </Fragment>
           <script hidden></script>
         </Fragment>
-        <Fragment ssr-required>
-          <Signal ssr-required>{'run'}</Signal>
-        </Fragment>
       </Component>
     );
   });
@@ -904,6 +936,182 @@ describe.each([
   });
 
   describe('regression', () => {
+    it('should not re-create the root child component on re-render', async () => {
+      const Child = component$<{ text: string }>((props) => {
+        // no `track()`, so this runs once per instance and records what the instance was born with
+        const initial = useSignal('');
+        useTask$(() => {
+          initial.value = props.text;
+        });
+        return (
+          <span>
+            {props.text}|{initial.value}
+          </span>
+        );
+      });
+
+      /**
+       * The component renders no host element of its own, so `useVisibleTask$` makes it render a
+       * placeholder `<script>` next to the child, wrapped in a fragment. That wrapper is re-created
+       * on every render, so it has to keep its identity - otherwise the child below it is destroyed
+       * and rebuilt, losing its state and its DOM.
+       */
+      const Cmp = component$(() => {
+        const isLoaded = useSignal(false);
+        useVisibleTask$(() => {
+          isLoaded.value = true;
+        });
+        return <Child text={stringify(isLoaded.value)} />;
+      });
+
+      const { document } = await render(<Cmp />, { debug });
+      const spanBeforeRerender = document.querySelector('span');
+      if (render === ssrRenderToDom) {
+        await trigger(document.body, 'script', 'd:qinit');
+      }
+      await getTestPlatform().flush();
+
+      // the child sees the new prop, but it is still the instance created with the old one
+      expect(document.querySelector('span')?.textContent).toBe('vtrue|vfalse');
+      // and it is the same dom node, not a rebuilt one (only observable after a resume, because a
+      // client only render has already re-rendered by the time it returns)
+      expect(document.querySelector('span')).toBe(spanBeforeRerender);
+    });
+
+    it('should not re-create the root child when output changes from child to array', async () => {
+      const Child = component$<{ text: string }>((props) => {
+        const initial = useSignal('');
+        useTask$(() => {
+          initial.value = props.text;
+        });
+        return (
+          <span>
+            {props.text}|{initial.value}
+          </span>
+        );
+      });
+
+      const Cmp = component$(() => {
+        const isLoaded = useSignal(false);
+        useVisibleTask$(() => {
+          isLoaded.value = true;
+        });
+        const child = <Child text={stringify(isLoaded.value)} />;
+        return isLoaded.value ? [child] : child;
+      });
+
+      const { document } = await render(<Cmp />, { debug });
+      const spanBeforeRerender = document.querySelector('span');
+      if (render === ssrRenderToDom) {
+        await trigger(document.body, 'script', 'd:qinit');
+      }
+      await getTestPlatform().flush();
+
+      expect(document.querySelector('span')?.textContent).toBe('vtrue|vfalse');
+      expect(document.querySelector('span')).toBe(spanBeforeRerender);
+    });
+
+    it('should not modify a jsx node which the component returns', async () => {
+      // a component may return a node it does not rebuild - a hoisted or a shared one. Rendering it
+      // from two components renders it twice without depending on a re-render happening.
+      const shared = (<Fragment key="shared">shared</Fragment>) as JSXNodeInternal;
+
+      const WithTask = component$(() => {
+        useVisibleTask$(() => {});
+        return shared as JSXOutput;
+      });
+      // returns the same node, but registers nothing of its own
+      const NoHooks = component$(() => shared as JSXOutput);
+
+      const Cmp = component$(() => (
+        <div>
+          <WithTask />
+          <NoHooks />
+        </div>
+      ));
+
+      const { vNode, document } = await render(<Cmp />, { debug });
+      if (render === ssrRenderToDom) {
+        await trigger(document.body, 'script', 'd:qinit');
+      }
+      await getTestPlatform().flush();
+
+      // the placeholder goes into the rendered output, the returned node stays untouched
+      const children = shared.children;
+      expect(Array.isArray(children) ? children.length : 1).toBe(1);
+
+      // so only the component which registered the event renders a placeholder - otherwise the
+      // second one renders a `<script>` carrying the first component's task
+      expect(document.querySelectorAll('script[q-d\\:qinit]').length).toBe(1);
+      expect(vNode).toMatchVDOM(
+        <Component ssr-required>
+          <div>
+            <Component ssr-required>
+              <Fragment ssr-required>
+                {'shared'}
+                <script hidden></script>
+              </Fragment>
+            </Component>
+            <Component ssr-required>
+              <Fragment ssr-required>{'shared'}</Fragment>
+            </Component>
+          </div>
+        </Component>
+      );
+    });
+
+    it('should keep every instance of a headless component when there are many of them', async () => {
+      // every one of them renders the same keyed wrapper around its placeholder, and the key is
+      // only ever matched against siblings, so the instances must not be mixed up
+      const Child = component$<{ n: number; text: string }>((props) => {
+        const initial = useSignal('');
+        useTask$(() => {
+          initial.value = props.text;
+        });
+        return (
+          <span>
+            [{String(props.n)}:{props.text}|{initial.value}]
+          </span>
+        );
+      });
+
+      const Headless = component$<{ n: number }>((props) => {
+        const isLoaded = useSignal(false);
+        useVisibleTask$(() => {
+          isLoaded.value = true;
+        });
+        return <Child n={props.n} text={stringify(isLoaded.value)} />;
+      });
+
+      const COUNT = 10;
+      const Cmp = component$(() => (
+        <div>
+          {Array.from({ length: COUNT }, (_, i) => (
+            <Headless key={`k${i}`} n={i} />
+          ))}
+          {Array.from({ length: COUNT }, (_, i) => (
+            <Headless n={100 + i} />
+          ))}
+        </div>
+      ));
+
+      const { document } = await render(<Cmp />, { debug });
+      if (render === ssrRenderToDom) {
+        await trigger(document.body, 'script', 'd:qinit');
+      }
+      await getTestPlatform().flush();
+
+      const texts = Array.from(document.querySelectorAll('span')).map((s) => s.textContent);
+      // every instance kept the value it was born with, and kept its own number
+      expect(texts).toHaveLength(COUNT * 2);
+      expect(new Set(texts).size).toBe(COUNT * 2);
+      expect(texts.filter((t) => !t!.endsWith('|vfalse]'))).toEqual([]);
+      expect(texts[0]).toBe('[0:vtrue|vfalse]');
+      expect(texts[COUNT]).toBe('[100:vtrue|vfalse]');
+      // one placeholder per instance, they do not share or steal each other's
+      expect(document.querySelectorAll('script[q-d\\:qinit]').length).toBe(COUNT * 2);
+    });
+
     it('should not double-register events on component re-render', async () => {
       const Cmp = component$(() => {
         const count = useSignal(0);

From 8436357a1607f4cb251b1d28fb82c00ca8c5038a Mon Sep 17 00:00:00 2001
From: "andrii.holubenko" <andrii.holubenko@gr8.tech>
Date: Fri, 28 Aug 2026 20:32:14 +0200
Subject: [PATCH 2/2] fix(core): stop wrapping a headless component's output in
 a fragment

---
 .changeset/lucky-moons-remount.md             |  37 +---
 .../src/core/shared/component-execution.ts    |  50 +----
 .../qwik/src/core/shared/utils/markers.ts     |   1 +
 packages/qwik/src/core/tests/use-on.spec.tsx  |  56 +++---
 .../src/core/tests/use-visible-task.spec.tsx  | 187 ++++++++----------
 5 files changed, 115 insertions(+), 216 deletions(-)

diff --git a/.changeset/lucky-moons-remount.md b/.changeset/lucky-moons-remount.md
index 851b41200fb..167992954c1 100644
--- a/.changeset/lucky-moons-remount.md
+++ b/.changeset/lucky-moons-remount.md
@@ -2,39 +2,4 @@
 '@qwik.dev/core': patch
 ---
 
-fix: a component which renders no DOM element of its own and registers a document or window `useOn`
-event - `useVisibleTask$` among them - no longer destroys everything it rendered on every re-render,
-and no longer loses that event on some outputs.
-
-Such a component gets a placeholder `<script>` to hang the listener on. Four problems came from how
-that placeholder was added to the output:
-
-- The output was wrapped together with the placeholder in a fragment without a key, and a new
-  wrapper was built on every render. Fragments without a key are never matched against the existing
-  tree, so the wrapper, every component below it and their DOM were re-created on every render,
-  losing their state. After SSR the whole subtree was rebuilt on resume.
-- A component returning a list of nodes lost the placeholder unless the first item happened to be a
-  fragment, because the wrapped result was discarded. Its `useVisibleTask$` never ran after resume.
-- A component returning a signal, a promise or anything which is not a node or a fragment lost the
-  placeholder for the same reason.
-- The placeholder was pushed into the node the component returned. A component returning a node it
-  does not rebuild - a hoisted or shared piece of JSX - had that node modified for good, and every
-  other component returning the same node then rendered a stray `<script>` carrying the first
-  component's task.
-
-Whatever such a component returns is now placed, together with the placeholder, in a single fragment
-which carries a stable key, and the returned node itself is never written to. The identity of the
-output no longer depends on its shape, so a component which returns a single node on one render and
-a list on the next keeps its children instead of rebuilding them.
-
-Two behaviour changes come with that:
-
-- A component returning a list is now rendered inside that fragment, one level deeper than before,
-  with the placeholder as the last child of it. `qinit` handlers run in document order, so a list
-  whose first item was a fragment used to run the parent's task before the tasks of the components
-  inside the list; it now runs after them, which is what a component with a single root has always
-  done.
-- A fragment returned without a key by such a component is given the wrapper key, so it is matched
-  across re-renders like every other output. The same component without a document or window `useOn`
-  event still gets a new fragment on every render, because unkeyed fragments are deliberately never
-  matched by `expectVirtual`.
+fix: a component without its own dom element no longer rebuilds its children on re-render and keeps its `useOn` document and window events
diff --git a/packages/qwik/src/core/shared/component-execution.ts b/packages/qwik/src/core/shared/component-execution.ts
index 6d50f8ad4f4..de26e4ad0e9 100644
--- a/packages/qwik/src/core/shared/component-execution.ts
+++ b/packages/qwik/src/core/shared/component-execution.ts
@@ -7,8 +7,7 @@ import { invokeApply, newRenderInvokeContext, type RenderInvokeContext } from '.
 import { type EventQRL, type UseOnEvent, type UseOnMap } from '../use/use-on';
 import { isQwikComponent, type OnRenderFn } from './component.public';
 import { assertDefined } from './error/assert';
-import { Fragment, type Props } from './jsx/jsx-runtime';
-import { _jsxSorted } from './jsx/jsx-internal';
+import { type Props } from './jsx/jsx-runtime';
 import { JSXNodeImpl, isJSXNode } from './jsx/jsx-node';
 import type { JSXNodeInternal, JSXOutput } from './jsx/types/jsx-node';
 import type { KnownEventNames } from './jsx/types/jsx-qwik-events';
@@ -23,6 +22,7 @@ import {
   OnRenderProp,
   USE_ON_LOCAL,
   USE_ON_LOCAL_SEQ_IDX,
+  USE_ON_PLACEHOLDER_KEY,
 } from './utils/markers';
 import { MAX_RETRY_ON_PROMISE_COUNT, isPromise, maybeThen, safeCall } from './utils/promises';
 import { isArray, type ValueOrPromise } from './utils/types';
@@ -334,59 +334,21 @@ function findFirstElementNode(jsx: JSXOutput): ValueOrPromise<JSXNodeInternal<st
   return null;
 }
 
-/**
- * Key of the fragment which wraps a headless component's output together with its `useOn`
- * placeholder `<script>`.
- *
- * The wrapper is re-created on every render of the component, so it needs a stable identity.
- * Unkeyed fragments are intentionally never matched by `expectVirtual`, which would tear down and
- * re-create the whole subtree - and with it every component instance below it - on every
- * re-render.
- */
-const PLACEHOLDER_FRAGMENT_KEY = ':useOn';
-
 /**
  * Injects a placeholder <script> element into the JSX output.
  *
  * This is necessary for headless components (components that don't render a real DOM element) to
  * have an anchor point for `useOn` event listeners that target the document or window.
  *
- * The placeholder has to end up in the output for every shape a component can return, and it must
- * not change the identity of what the component rendered, because this runs on every render.
- *
- * @param jsx The JSX output to wrap.
+ * @param jsx The JSX output of the component.
  * @param placeholder The placeholder element to inject.
- * @returns The JSX output containing the placeholder.
+ * @returns The JSX output with the placeholder as its last sibling.
  */
 function injectPlaceholderElement(jsx: JSXOutput, placeholder: JSXNodeInternal<string>): JSXOutput {
-  // Arrays share the stable wrapper without mutating caller-owned output.
-  if (isArray(jsx)) {
-    return _jsxSorted(Fragment, null, null, [...jsx, placeholder], 0, PLACEHOLDER_FRAGMENT_KEY);
-  }
-
-  // Preserve user keys; stabilize unkeyed fragments without mutating input.
-  if (isJSXNode(jsx) && jsx.type === Fragment) {
-    const children =
-      jsx.children == null ? [] : isArray(jsx.children) ? jsx.children : [jsx.children];
-    return _jsxSorted(
-      Fragment,
-      jsx.varProps,
-      jsx.constProps,
-      [...children, placeholder],
-      jsx.flags,
-      jsx.key ?? PLACEHOLDER_FRAGMENT_KEY,
-      jsx.dev
-    );
-  }
-
-  // Everything else - a component, an element, text, a signal, a promise, nothing at all - cannot
-  // take the placeholder as a child, so it is wrapped in a fragment together with it. Inline
-  // components may ignore children, and `component$` children become projections, so appending to
-  // the node itself is not an option.
-  return _jsxSorted(Fragment, null, null, [jsx, placeholder], 0, PLACEHOLDER_FRAGMENT_KEY);
+  return isArray(jsx) ? [...jsx, placeholder] : [jsx, placeholder];
 }
 
 /** @returns An empty <script> element for adding qwik metadata attributes to */
 function createPlaceholderScriptNode(): JSXNodeInternal<string> {
-  return new JSXNodeImpl('script', null, { hidden: '' }, null, 0, null);
+  return new JSXNodeImpl('script', null, { hidden: '' }, null, 0, USE_ON_PLACEHOLDER_KEY);
 }
diff --git a/packages/qwik/src/core/shared/utils/markers.ts b/packages/qwik/src/core/shared/utils/markers.ts
index c3d4f5a13a7..b47f945c311 100644
--- a/packages/qwik/src/core/shared/utils/markers.ts
+++ b/packages/qwik/src/core/shared/utils/markers.ts
@@ -88,6 +88,7 @@ export const QDefaultSlot = '';
 export const ELEMENT_ID = 'q:id';
 export const ELEMENT_KEY = 'q:key';
 export const ELEMENT_PROPS = 'q:props';
+export const USE_ON_PLACEHOLDER_KEY = ':useOn';
 /** @internal */
 export const ELEMENT_SEQ = 'q:seq';
 export const ELEMENT_SEQ_IDX = 'q:seqIdx';
diff --git a/packages/qwik/src/core/tests/use-on.spec.tsx b/packages/qwik/src/core/tests/use-on.spec.tsx
index 957197d0011..3b20c55667b 100644
--- a/packages/qwik/src/core/tests/use-on.spec.tsx
+++ b/packages/qwik/src/core/tests/use-on.spec.tsx
@@ -363,8 +363,9 @@ describe.each([
       expect(vNode).toMatchVDOM(
         <Component ssr-required>
           <Fragment ssr-required>
-            Count: <Signal ssr-required>{'123'}</Signal>!<script hidden></script>
+            Count: <Signal ssr-required>{'123'}</Signal>!
           </Fragment>
+          <script hidden></script>
         </Component>
       );
 
@@ -372,8 +373,9 @@ describe.each([
       expect(vNode).toMatchVDOM(
         <Component ssr-required>
           <Fragment ssr-required>
-            Count: <Signal ssr-required>{'124'}</Signal>!<script hidden></script>
+            Count: <Signal ssr-required>{'124'}</Signal>!
           </Fragment>
+          <script hidden></script>
         </Component>
       );
     });
@@ -412,28 +414,24 @@ describe.each([
       const { vNode, container } = await render(<Counter initial={123} />, { debug });
       expect(vNode).toMatchVDOM(
         <Component ssr-required>
-          <Fragment ssr-required>
-            <InlineComponent ssr-required>
-              <Fragment ssr-required>
-                Count: <Signal ssr-required>{'123'}</Signal>!
-              </Fragment>
-            </InlineComponent>
-            <script hidden />
-          </Fragment>
+          <InlineComponent ssr-required>
+            <Fragment ssr-required>
+              Count: <Signal ssr-required>{'123'}</Signal>!
+            </Fragment>
+          </InlineComponent>
+          <script hidden />
         </Component>
       );
 
       await trigger(container.element, 'script', 'd:click');
       expect(vNode).toMatchVDOM(
         <Component ssr-required>
-          <Fragment ssr-required>
-            <InlineComponent ssr-required>
-              <Fragment ssr-required>
-                Count: <Signal ssr-required>{'124'}</Signal>!
-              </Fragment>
-            </InlineComponent>
-            <script hidden />
-          </Fragment>
+          <InlineComponent ssr-required>
+            <Fragment ssr-required>
+              Count: <Signal ssr-required>{'124'}</Signal>!
+            </Fragment>
+          </InlineComponent>
+          <script hidden />
         </Component>
       );
     });
@@ -625,8 +623,9 @@ describe.each([
       expect(vNode).toMatchVDOM(
         <Component ssr-required>
           <Fragment ssr-required>
-            Count: <Signal ssr-required>{'123'}</Signal>!<script hidden></script>
+            Count: <Signal ssr-required>{'123'}</Signal>!
           </Fragment>
+          <script hidden></script>
         </Component>
       );
 
@@ -634,8 +633,9 @@ describe.each([
       expect(vNode).toMatchVDOM(
         <Component ssr-required>
           <Fragment ssr-required>
-            Count: <Signal ssr-required>{'124'}</Signal>!<script hidden></script>
+            Count: <Signal ssr-required>{'124'}</Signal>!
           </Fragment>
+          <script hidden></script>
         </Component>
       );
     });
@@ -1059,11 +1059,9 @@ describe.each([
         <Component ssr-required>
           <Component ssr-required>
             <Component ssr-required>
-              <Component ssr-required>
-                <div>test</div>
-              </Component>
-              <script hidden></script>
+              <div>test</div>
             </Component>
+            <script hidden></script>
           </Component>
         </Component>
       );
@@ -1089,12 +1087,10 @@ describe.each([
       expect(vNode).toMatchVDOM(
         <Component ssr-required>
           <Component ssr-required>
-            <Component ssr-required>
-              <Projection ssr-required>
-                <div>test</div>
-              </Projection>
-              <script hidden></script>
-            </Component>
+            <Projection ssr-required>
+              <div>test</div>
+            </Projection>
+            <script hidden></script>
           </Component>
         </Component>
       );
diff --git a/packages/qwik/src/core/tests/use-visible-task.spec.tsx b/packages/qwik/src/core/tests/use-visible-task.spec.tsx
index a374636b72b..95816dccb1b 100644
--- a/packages/qwik/src/core/tests/use-visible-task.spec.tsx
+++ b/packages/qwik/src/core/tests/use-visible-task.spec.tsx
@@ -37,11 +37,6 @@ import type { JSXNodeInternal, JSXOutput } from '../shared/jsx/types/jsx-node';
 const debug = false; //true;
 Error.stackTraceLimit = 100;
 
-/** A function call is left eager by the optimizer, so reading a signal through it re-renders. */
-function stringify(value: unknown) {
-  return `v${value}`;
-}
-
 export function useDelay(value: string) {
   const ready = useSignal('---');
   useVisibleTask$(() => {
@@ -279,8 +274,8 @@ describe.each([
       <Component ssr-required>
         <Fragment ssr-required>
           <Signal ssr-required>{'run'}</Signal>
-          <script hidden></script>
         </Fragment>
+        <script hidden></script>
       </Component>
     );
   });
@@ -320,18 +315,15 @@ describe.each([
     if (render === ssrRenderToDom) {
       await trigger(document.body, 'script', 'd:qinit');
     }
-    // the placeholder joins the list as a sibling inside the stable wrapper
     expect(vNode).toMatchVDOM(
       <Component ssr-required>
         <Fragment ssr-required>
-          <Fragment ssr-required>
-            <Signal ssr-required>{'run'}</Signal>
-          </Fragment>
-          <Fragment ssr-required>
-            <Signal ssr-required>{'run'}</Signal>
-          </Fragment>
-          <script hidden></script>
+          <Signal ssr-required>{'run'}</Signal>
+        </Fragment>
+        <Fragment ssr-required>
+          <Signal ssr-required>{'run'}</Signal>
         </Fragment>
+        <script hidden></script>
       </Component>
     );
   });
@@ -350,9 +342,8 @@ describe.each([
     }
     expect(vNode).toMatchVDOM(
       <Component ssr-required>
-        <Fragment ssr-required>
-          <script hidden></script>
-        </Fragment>
+        <Fragment ssr-required></Fragment>
+        <script hidden></script>
       </Component>
     );
   });
@@ -372,10 +363,8 @@ describe.each([
     expect((globalThis as any).log).toEqual(['task']);
     expect(vNode).toMatchVDOM(
       <Component ssr-required>
-        <Fragment ssr-required>
-          {''}
-          <script hidden></script>
-        </Fragment>
+        {''}
+        <script hidden></script>
       </Component>
     );
   });
@@ -395,10 +384,8 @@ describe.each([
     expect((globalThis as any).log).toEqual(['task']);
     expect(vNode).toMatchVDOM(
       <Component ssr-required>
-        <Fragment ssr-required>
-          {''}
-          <script hidden></script>
-        </Fragment>
+        {''}
+        <script hidden></script>
       </Component>
     );
   });
@@ -937,31 +924,24 @@ describe.each([
 
   describe('regression', () => {
     it('should not re-create the root child component on re-render', async () => {
+      (globalThis as any).childRenderCounter = 0;
+      (globalThis as any).childInstanceCounter = 0;
       const Child = component$<{ text: string }>((props) => {
-        // no `track()`, so this runs once per instance and records what the instance was born with
-        const initial = useSignal('');
+        (globalThis as any).childRenderCounter++;
         useTask$(() => {
-          initial.value = props.text;
+          // no `track()`, so this runs once per instance
+          (globalThis as any).childInstanceCounter++;
         });
-        return (
-          <span>
-            {props.text}|{initial.value}
-          </span>
-        );
+        return <span>{props.text}</span>;
       });
 
-      /**
-       * The component renders no host element of its own, so `useVisibleTask$` makes it render a
-       * placeholder `<script>` next to the child, wrapped in a fragment. That wrapper is re-created
-       * on every render, so it has to keep its identity - otherwise the child below it is destroyed
-       * and rebuilt, losing its state and its DOM.
-       */
       const Cmp = component$(() => {
         const isLoaded = useSignal(false);
         useVisibleTask$(() => {
           isLoaded.value = true;
         });
-        return <Child text={stringify(isLoaded.value)} />;
+        const text = `v${isLoaded.value}`;
+        return <Child text={text} />;
       });
 
       const { document } = await render(<Cmp />, { debug });
@@ -969,26 +949,26 @@ describe.each([
       if (render === ssrRenderToDom) {
         await trigger(document.body, 'script', 'd:qinit');
       }
-      await getTestPlatform().flush();
 
-      // the child sees the new prop, but it is still the instance created with the old one
-      expect(document.querySelector('span')?.textContent).toBe('vtrue|vfalse');
-      // and it is the same dom node, not a rebuilt one (only observable after a resume, because a
-      // client only render has already re-rendered by the time it returns)
+      expect(document.querySelector('span')?.textContent).toBe('vtrue');
+      expect((globalThis as any).childRenderCounter).toBe(1);
+      expect((globalThis as any).childInstanceCounter).toBe(1);
+      // the same dom node, not a rebuilt one (only observable after a resume, because a client only
+      // render has already re-rendered by the time it returns)
       expect(document.querySelector('span')).toBe(spanBeforeRerender);
+      (globalThis as any).childRenderCounter = undefined;
+      (globalThis as any).childInstanceCounter = undefined;
     });
 
     it('should not re-create the root child when output changes from child to array', async () => {
+      (globalThis as any).childRenderCounter = 0;
+      (globalThis as any).childInstanceCounter = 0;
       const Child = component$<{ text: string }>((props) => {
-        const initial = useSignal('');
+        (globalThis as any).childRenderCounter++;
         useTask$(() => {
-          initial.value = props.text;
+          (globalThis as any).childInstanceCounter++;
         });
-        return (
-          <span>
-            {props.text}|{initial.value}
-          </span>
-        );
+        return <span>{props.text}</span>;
       });
 
       const Cmp = component$(() => {
@@ -996,7 +976,8 @@ describe.each([
         useVisibleTask$(() => {
           isLoaded.value = true;
         });
-        const child = <Child text={stringify(isLoaded.value)} />;
+        const text = `v${isLoaded.value}`;
+        const child = <Child text={text} />;
         return isLoaded.value ? [child] : child;
       });
 
@@ -1005,15 +986,16 @@ describe.each([
       if (render === ssrRenderToDom) {
         await trigger(document.body, 'script', 'd:qinit');
       }
-      await getTestPlatform().flush();
 
-      expect(document.querySelector('span')?.textContent).toBe('vtrue|vfalse');
+      expect(document.querySelector('span')?.textContent).toBe('vtrue');
+      expect((globalThis as any).childRenderCounter).toBe(1);
+      expect((globalThis as any).childInstanceCounter).toBe(1);
       expect(document.querySelector('span')).toBe(spanBeforeRerender);
+      (globalThis as any).childRenderCounter = undefined;
+      (globalThis as any).childInstanceCounter = undefined;
     });
 
     it('should not modify a jsx node which the component returns', async () => {
-      // a component may return a node it does not rebuild - a hoisted or a shared one. Rendering it
-      // from two components renders it twice without depending on a re-render happening.
       const shared = (<Fragment key="shared">shared</Fragment>) as JSXNodeInternal;
 
       const WithTask = component$(() => {
@@ -1034,23 +1016,16 @@ describe.each([
       if (render === ssrRenderToDom) {
         await trigger(document.body, 'script', 'd:qinit');
       }
-      await getTestPlatform().flush();
 
-      // the placeholder goes into the rendered output, the returned node stays untouched
-      const children = shared.children;
-      expect(Array.isArray(children) ? children.length : 1).toBe(1);
-
-      // so only the component which registered the event renders a placeholder - otherwise the
-      // second one renders a `<script>` carrying the first component's task
+      // the returned node stays untouched
+      expect(shared.children).toBe('shared');
       expect(document.querySelectorAll('script[q-d\\:qinit]').length).toBe(1);
       expect(vNode).toMatchVDOM(
         <Component ssr-required>
           <div>
             <Component ssr-required>
-              <Fragment ssr-required>
-                {'shared'}
-                <script hidden></script>
-              </Fragment>
+              <Fragment ssr-required>{'shared'}</Fragment>
+              <script hidden></script>
             </Component>
             <Component ssr-required>
               <Fragment ssr-required>{'shared'}</Fragment>
@@ -1060,56 +1035,56 @@ describe.each([
       );
     });
 
-    it('should keep every instance of a headless component when there are many of them', async () => {
-      // every one of them renders the same keyed wrapper around its placeholder, and the key is
-      // only ever matched against siblings, so the instances must not be mixed up
-      const Child = component$<{ n: number; text: string }>((props) => {
-        const initial = useSignal('');
+    it('should keep every headless component instance when the list is reordered', async () => {
+      (globalThis as any).childRenderCounter = 0;
+      (globalThis as any).childInstanceCounter = 0;
+      const Child = component$<{ label: string }>((props) => {
+        (globalThis as any).childRenderCounter++;
         useTask$(() => {
-          initial.value = props.text;
+          (globalThis as any).childInstanceCounter++;
         });
-        return (
-          <span>
-            [{String(props.n)}:{props.text}|{initial.value}]
-          </span>
-        );
+        return <span>{props.label}</span>;
       });
 
-      const Headless = component$<{ n: number }>((props) => {
-        const isLoaded = useSignal(false);
-        useVisibleTask$(() => {
-          isLoaded.value = true;
-        });
-        return <Child n={props.n} text={stringify(isLoaded.value)} />;
+      const Headless = component$<{ name: string; index: number }>((props) => {
+        useVisibleTask$(() => {});
+        return <Child label={`${props.name}${props.index}`} />;
       });
 
-      const COUNT = 10;
-      const Cmp = component$(() => (
-        <div>
-          {Array.from({ length: COUNT }, (_, i) => (
-            <Headless key={`k${i}`} n={i} />
-          ))}
-          {Array.from({ length: COUNT }, (_, i) => (
-            <Headless n={100 + i} />
-          ))}
-        </div>
-      ));
+      const Cmp = component$(() => {
+        const names = useSignal(['a', 'b', 'c']);
+        return (
+          <div>
+            <button onClick$={() => (names.value = [...names.value].reverse())}>reverse</button>
+            {names.value.map((name, index) => (
+              <Headless key={name} name={name} index={index} />
+            ))}
+          </div>
+        );
+      });
 
       const { document } = await render(<Cmp />, { debug });
       if (render === ssrRenderToDom) {
         await trigger(document.body, 'script', 'd:qinit');
       }
-      await getTestPlatform().flush();
-
-      const texts = Array.from(document.querySelectorAll('span')).map((s) => s.textContent);
-      // every instance kept the value it was born with, and kept its own number
-      expect(texts).toHaveLength(COUNT * 2);
-      expect(new Set(texts).size).toBe(COUNT * 2);
-      expect(texts.filter((t) => !t!.endsWith('|vfalse]'))).toEqual([]);
-      expect(texts[0]).toBe('[0:vtrue|vfalse]');
-      expect(texts[COUNT]).toBe('[100:vtrue|vfalse]');
+      const spansBeforeReorder = Array.from(document.querySelectorAll('span'));
+      expect(spansBeforeReorder.map((span) => span.textContent)).toEqual(['a0', 'b1', 'c2']);
+      expect((globalThis as any).childRenderCounter).toBe(3);
+      expect((globalThis as any).childInstanceCounter).toBe(3);
+
+      await trigger(document.body, 'button', 'click');
+
+      const spansAfterReorder = Array.from(document.querySelectorAll('span'));
+      expect(spansAfterReorder.map((span) => span.textContent)).toEqual(['c0', 'b1', 'a2']);
+      expect(spansAfterReorder[0]).toBe(spansBeforeReorder[2]);
+      expect(spansAfterReorder[1]).toBe(spansBeforeReorder[1]);
+      expect(spansAfterReorder[2]).toBe(spansBeforeReorder[0]);
+      expect((globalThis as any).childRenderCounter).toBe(3);
+      expect((globalThis as any).childInstanceCounter).toBe(3);
       // one placeholder per instance, they do not share or steal each other's
-      expect(document.querySelectorAll('script[q-d\\:qinit]').length).toBe(COUNT * 2);
+      expect(document.querySelectorAll('script[q-d\\:qinit]').length).toBe(3);
+      (globalThis as any).childRenderCounter = undefined;
+      (globalThis as any).childInstanceCounter = undefined;
     });
 
     it('should not double-register events on component re-render', async () => {