Merge pull request #7633 from QwikDev/v2-dont-rerender-empty-props

fix: proper empty props diffing

Author: wmertens

.changeset/cold-rice-slide.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: proper empty props diffing

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

@@ -1237,7 +1237,12 @@ function getComponentHash(vNode: VNode | null, getObject: (id: string) => any):
 function Projection() {}
 
 function propsDiffer(src: Record<string, any>, dst: Record<string, any>): boolean {
-  if (!src || !dst) {
+  const srcEmpty = isPropsEmpty(src);
+  const dstEmpty = isPropsEmpty(dst);
+  if (srcEmpty && dstEmpty) {
+    return false;
+  }
+  if (srcEmpty || dstEmpty) {
     return true;
   }
   let srcKeys = removePropsKeys(Object.keys(src), ['children', QBackRefs]);
@@ -1257,6 +1262,13 @@ function propsDiffer(src: Record<string, any>, dst: Record<string, any>): boolea
   return false;
 }
 
+function isPropsEmpty(props: Record<string, any>): boolean {
+  if (!props) {
+    return true;
+  }
+  return Object.keys(props).length === 0;
+}
+
 function removePropsKeys(keys: string[], propKeys: string[]): string[] {
   for (let i = propKeys.length - 1; i >= 0; i--) {
     const propKey = propKeys[i];

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

@@ -301,6 +301,76 @@ describe.each([
     );
   });
 
+  it('should not rerender component with empty props', async () => {
+    (globalThis as any).componentExecuted = [];
+    const Component1 = component$<PropsOf<any>>(() => {
+      (globalThis as any).componentExecuted.push('Component1');
+      return <div></div>;
+    });
+    const Parent = component$(() => {
+      (globalThis as any).componentExecuted.push('Parent');
+      const show = useSignal(true);
+      return (
+        <main class="parent" onClick$={() => (show.value = !show.value)}>
+          {show.value && <Component1 />}
+          <Component1 />
+        </main>
+      );
+    });
+    const { vNode, container } = await render(<Parent />, { debug });
+    expect((globalThis as any).componentExecuted).toEqual(['Parent', 'Component1', 'Component1']);
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <main class="parent">
+          <Component ssr-required>
+            <div></div>
+          </Component>
+          <Component ssr-required>
+            <div></div>
+          </Component>
+        </main>
+      </Component>
+    );
+    await trigger(container.element, 'main.parent', 'click');
+    expect((globalThis as any).componentExecuted).toEqual([
+      'Parent',
+      'Component1',
+      'Component1',
+      'Parent',
+    ]);
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <main class="parent">
+          {''}
+          <Component ssr-required>
+            <div></div>
+          </Component>
+        </main>
+      </Component>
+    );
+    await trigger(container.element, 'main.parent', 'click');
+    expect((globalThis as any).componentExecuted).toEqual([
+      'Parent',
+      'Component1',
+      'Component1',
+      'Parent',
+      'Parent',
+      'Component1',
+    ]);
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <main class="parent">
+          <Component ssr-required>
+            <div></div>
+          </Component>
+          <Component ssr-required>
+            <div></div>
+          </Component>
+        </main>
+      </Component>
+    );
+  });
+
   it('should remove children from component$', async () => {
     const log: string[] = [];
     const MyComp = component$((props: any) => {