feat: run cleanup function for async computed before computation

Author: Varixo

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

@@ -4,7 +4,11 @@ import { clearAllEffects, clearEffectSubscription } from '../reactive-primitives
 import { WrappedSignalImpl } from '../reactive-primitives/impl/wrapped-signal-impl';
 import type { Signal } from '../reactive-primitives/signal.public';
 import { SubscriptionData } from '../reactive-primitives/subscription-data';
-import { EffectProperty, EffectSubscriptionProp } from '../reactive-primitives/types';
+import {
+  EffectProperty,
+  EffectSubscriptionProp,
+  type Consumer,
+} from '../reactive-primitives/types';
 import { isSignal } from '../reactive-primitives/utils';
 import { executeComponent } from '../shared/component-execution';
 import { SERIALIZABLE_STATE, type OnRenderFn } from '../shared/component.public';
@@ -48,7 +52,7 @@ import { isPromise, retryOnPromise } from '../shared/utils/promises';
 import { isSlotProp } from '../shared/utils/prop';
 import { hasClassAttr } from '../shared/utils/scoped-styles';
 import { serializeAttribute } from '../shared/utils/styles';
-import { isArray, type ValueOrPromise } from '../shared/utils/types';
+import { isArray, isObject, type ValueOrPromise } from '../shared/utils/types';
 import { trackSignalAndAssignHost } from '../use/use-core';
 import { TaskFlags, isTask } from '../use/use-task';
 import type { DomContainer } from './dom-container';
@@ -81,9 +85,10 @@ import {
 } from './vnode';
 import type { ElementVNode, TextVNode, VNode, VirtualVNode } from './vnode-impl';
 import { getAttributeNamespace, getNewElementNamespaceData } from './vnode-namespace';
-import { cleanupDestroyable, isDestroyable } from '../use/utils/destroyable';
+import { cleanupDestroyable } from '../use/utils/destroyable';
 import { SignalImpl } from '../reactive-primitives/impl/signal-impl';
 import { isStore } from '../reactive-primitives/impl/store';
+import { AsyncComputedSignalImpl } from '../reactive-primitives/impl/async-computed-signal-impl';
 
 export const vnode_diff = (
   container: ClientContainer,
@@ -1540,19 +1545,22 @@ export function cleanup(container: ClientContainer, vNode: VNode) {
         if (seq) {
           for (let i = 0; i < seq.length; i++) {
             const obj = seq[i];
-            if (isTask(obj)) {
-              clearAllEffects(container, obj);
-              if (obj.$flags$ & TaskFlags.VISIBLE_TASK) {
-                container.$scheduler$(ChoreType.CLEANUP_VISIBLE, obj);
-                // don't call cleanupDestroyable yet, do it by the scheduler
-                continue;
+            if (isObject(obj)) {
+              const objIsTask = isTask(obj);
+              if (objIsTask) {
+                clearAllEffects(container, obj);
+                if (obj.$flags$ & TaskFlags.VISIBLE_TASK) {
+                  container.$scheduler$(ChoreType.CLEANUP_VISIBLE, obj);
+                  // don't call cleanupDestroyable yet, do it by the scheduler
+                  continue;
+                }
+              } else if (obj instanceof SignalImpl || isStore(obj)) {
+                clearAllEffects(container, obj as Consumer);
               }
-            } else if (obj instanceof SignalImpl || isStore(obj)) {
-              clearAllEffects(container, obj);
-            }
 
-            if (isDestroyable(obj)) {
-              cleanupDestroyable(obj);
+              if (objIsTask || obj instanceof AsyncComputedSignalImpl) {
+                cleanupDestroyable(obj);
+              }
             }
           }
         }

packages/qwik/src/core/reactive-primitives/impl/async-computed-signal-impl.ts

@@ -3,6 +3,7 @@ import type { NoSerialize } from '../../shared/serdes/verify';
 import type { Container } from '../../shared/types';
 import { ChoreType } from '../../shared/util-chore-type';
 import { isPromise, retryOnPromise } from '../../shared/utils/promises';
+import { cleanupDestroyable } from '../../use/utils/destroyable';
 import { cleanupFn, trackFn } from '../../use/utils/tracker';
 import type { BackRef } from '../cleanup';
 import {
@@ -135,6 +136,11 @@ export class AsyncComputedSignalImpl<T>
       this.untrackedLoading = true;
       this.untrackedError = null;
 
+      if (this.$promiseValue$ !== NEEDS_COMPUTATION) {
+        // skip cleanup after resuming
+        cleanupDestroyable(this);
+      }
+
       const promise = untrackedValue
         .then((promiseValue) => {
           DEBUG && log('Promise resolved', promiseValue);

packages/qwik/src/core/tests/use-async-computed.spec.tsx

@@ -347,5 +347,29 @@ describe.each([
       // on server and client cleanup called again
       expect((globalThis as any).log).toEqual(['cleanup', 'cleanup']);
     });
+
+    it('should run cleanup on re-compute', async () => {
+      (globalThis as any).log = [];
+
+      const Counter = component$(() => {
+        const count = useSignal(1);
+        const asyncValue = useAsyncComputed$(({ track, cleanup }) => {
+          const current = track(count);
+          cleanup(() => {
+            (globalThis as any).log.push('cleanup');
+          });
+          return Promise.resolve(current * 2);
+        });
+        return <button onClick$={() => count.value++}>{asyncValue.value}</button>;
+      });
+      const { container } = await render(<Counter />, { debug });
+      expect((globalThis as any).log).toEqual(render === ssrRenderToDom ? ['cleanup'] : []);
+
+      await trigger(container.element, 'button', 'click');
+      expect((globalThis as any).log).toEqual(['cleanup']);
+
+      await trigger(container.element, 'button', 'click');
+      expect((globalThis as any).log).toEqual(['cleanup', 'cleanup']);
+    });
   });
 });

packages/qwik/src/core/use/utils/destroyable.ts

@@ -1,7 +1,5 @@
-import { AsyncComputedSignalImpl } from '../../reactive-primitives/impl/async-computed-signal-impl';
 import type { NoSerialize } from '../../shared/serdes/verify';
 import { logError } from '../../shared/utils/log';
-import { isTask } from '../use-task';
 
 export type Destroyable = { $destroy$: NoSerialize<() => void> | null };
 
@@ -16,7 +14,3 @@ export const cleanupDestroyable = (destroyable: Destroyable) => {
     }
   }
 };
-
-export const isDestroyable = (obj: unknown): obj is Destroyable => {
-  return isTask(obj) || obj instanceof AsyncComputedSignalImpl;
-};