fix(core): destroying the effect on afterRenderEffect (#63001)

JeanMeche · atscott · commit 322042c5b30e · 2025-08-08T08:46:47.000-07:00
Prior to this commit, the effect node wasn't destroyed. fixes #62980 PR Close #63001
diff --git a/packages/core/src/render3/reactivity/after_render_effect.ts b/packages/core/src/render3/reactivity/after_render_effect.ts
@@ -9,6 +9,7 @@
 import {
   consumerAfterComputation,
   consumerBeforeComputation,
+  consumerDestroy,
   consumerPollProducersForChange,
   producerAccessed,
   SIGNAL,
@@ -152,7 +153,7 @@ const AFTER_RENDER_PHASE_EFFECT_NODE = /* @__PURE__ */ (() => ({
 /**
  * An `AfterRenderSequence` that manages an `afterRenderEffect`'s phase effects.
  */
-class AfterRenderEffectSequence extends AfterRenderSequence {
+export class AfterRenderEffectSequence extends AfterRenderSequence {
   /**
    * While this sequence is executing, this tracks the last phase which was called by the
    * `afterRender` machinery.
@@ -223,8 +224,14 @@ class AfterRenderEffectSequence extends AfterRenderSequence {
 
     // Run the cleanup functions for each node.
     for (const node of this.nodes) {
-      for (const fn of node?.cleanup ?? EMPTY_CLEANUP_SET) {
-        fn();
+      if (node) {
+        try {
+          for (const fn of node.cleanup ?? EMPTY_CLEANUP_SET) {
+            fn();
+          }
+        } finally {
+          consumerDestroy(node);
+        }
       }
     }
   }
diff --git a/packages/core/test/acceptance/after_render_effect_spec.ts b/packages/core/test/acceptance/after_render_effect_spec.ts
@@ -14,7 +14,11 @@ import {
   provideZonelessChangeDetection,
   signal,
 } from '../../src/core';
-import {afterRenderEffect} from '../../src/render3/reactivity/after_render_effect';
+import {
+  afterRenderEffect,
+  AfterRenderEffectSequence,
+} from '../../src/render3/reactivity/after_render_effect';
+import {AfterRenderPhase} from '../../src/render3/after_render/api';
 import {TestBed} from '../../testing';
 
 describe('afterRenderEffect', () => {
@@ -191,6 +195,37 @@ describe('afterRenderEffect', () => {
     expect(log).toEqual(['cleanup earlyRead', 'earlyRead: 4', 'cleanup write', 'write: true']);
   });
 
+  it('should disconnect the consummer from the graph when destroyed', () => {
+    const log: string[] = [];
+    const appRef = TestBed.inject(ApplicationRef);
+    const counter = signal(0);
+
+    const ref = afterRenderEffect(
+      {
+        earlyRead: () => counter() % 2 === 0,
+        write: (isEven) => isEven(),
+        mixedReadWrite: (isEven) => isEven(),
+        read: (isEven) => isEven(),
+      },
+      {injector: appRef.injector},
+    ) as AfterRenderEffectSequence;
+
+    appRef.tick();
+
+    const phaseNodes = ref['nodes'];
+    expect(phaseNodes[AfterRenderPhase.EarlyRead]?.consumers).toBeDefined();
+    expect(phaseNodes[AfterRenderPhase.Write]?.consumers).toBeDefined();
+    expect(phaseNodes[AfterRenderPhase.MixedReadWrite]?.consumers).toBeDefined();
+    expect(phaseNodes[AfterRenderPhase.Read]?.producers).toBeDefined();
+
+    ref.destroy();
+
+    expect(phaseNodes[AfterRenderPhase.EarlyRead]?.consumers).toBeUndefined();
+    expect(phaseNodes[AfterRenderPhase.Write]?.consumers).toBeUndefined();
+    expect(phaseNodes[AfterRenderPhase.MixedReadWrite]?.consumers).toBeUndefined();
+    expect(phaseNodes[AfterRenderPhase.Read]?.producers).toBeUndefined();
+  });
+
   it('should run cleanup functions when destroyed', () => {
     const log: string[] = [];
     const appRef = TestBed.inject(ApplicationRef);
