fix: reexecute component with null key

Author: Varixo

.changeset/dirty-lemons-shop.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: reexecute component with null key

packages/qwik/src/core/client/vnode-diff.ts

@@ -1043,7 +1043,7 @@ export const vnode_diff = (
         }
         host = vNewNode as VirtualVNode;
         shouldRender = true;
-      } else if (!hashesAreEqual) {
+      } else if (!hashesAreEqual || !jsxNode.key) {
         insertNewComponent(host, componentQRL, jsxProps);
         host = vNewNode as VirtualVNode;
         shouldRender = true;

packages/qwik/src/core/tests/component.spec.tsx

@@ -1991,6 +1991,55 @@ describe.each([
     );
   });
 
+  it('should reexecute entire component without key', async () => {
+    const Child = component$((props: { text: string }) => {
+      const text = useSignal('');
+      useTask$(() => {
+        text.value = props.text;
+      });
+      return <div>{text.value}</div>;
+    });
+
+    const Cmp = component$(() => {
+      const toggle = useSignal(true);
+
+      return (
+        <>
+          <button onClick$={() => (toggle.value = !toggle.value)}></button>
+          {/* no key for both components */}
+          {toggle.value ? jsx(Child, { text: 'Hello' }, null) : jsx(Child, { text: 'World' }, null)}
+        </>
+      );
+    });
+
+    const { vNode, document } = await render(<Cmp />, { debug });
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          <button></button>
+          <Component ssr-required>
+            <div>
+              <Signal ssr-required>Hello</Signal>
+            </div>
+          </Component>
+        </Fragment>
+      </Component>
+    );
+    await trigger(document.body, 'button', 'click');
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          <button></button>
+          <Component ssr-required>
+            <div>
+              <Signal ssr-required>World</Signal>
+            </div>
+          </Component>
+        </Fragment>
+      </Component>
+    );
+  });
+
   describe('regression', () => {
     it('#3643', async () => {
       const Issue3643 = component$(() => {

packages/qwik/src/core/tests/use-on.spec.tsx

@@ -14,9 +14,8 @@ import {
   useTask$,
   useVisibleTask$,
 } from '@qwik.dev/core';
-import { domRender, ssrRenderToDom } from '@qwik.dev/core/testing';
+import { domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
 import { describe, expect, it } from 'vitest';
-import { trigger } from '../../testing/element-fixture';
 
 const debug = false; //true;
 Error.stackTraceLimit = 100;