How do Angular effects create infinite loops and what's the proper fix?

March 18, 2026

No strings attached, just valuable insights for your project

Angular effects run continuously when they read a signal and write back to the same/dependent signal, causing infinite re-execution. Each effect run reads signals → triggers signal change → effect re-runs → 100% CPU crash.

Solutions:

Guard condition prevents unnecessary runs
allowSignalWrites: true + careful logic
Use computed() for derivations instead

Code Example:

Code

import { Component, effect, signal } from '@angular/core';

@Component({
  template: `<input [(model)]="name" (input)="markDirty()">
             <p>Status: {{ status() }}</p>`
})
export class UserProfile {
  name = signal('John');
  isDirty = signal(false);
  status = signal('synced');
  
  //  INFINITE LOOP
  badEffect = effect(() => {
    this.status.set(`Saving ${this.name()}`); // Triggers re-run!
  });
  
  //  PROPER FIX: Guard condition
  constructor() {
    effect(() => {
      if (this.isDirty()) {
        this.status.set(`Saving ${this.name()}`);
        // API call here...
        this.isDirty.set(false);
        this.status.set('Saved');
      }
    });
  }
  
  markDirty() {
    this.isDirty.set(true);  // Triggers effect once
  }
}

Previous Next

Hire Now!