Stop Misusing Effects! Linked Signals Are the Better Alternative!

With Angular’s renaissance and the rise of new reactive state management tools like Signals and Effects, developers often turn to Effects for state synchronization.

While Effects have their place, they are not primarily designed to keep state in sync, and relying on them for this purpose can lead to unnecessary complexity.

Angular 19 introduces linked Signals, a powerful addition to the framework’s reactive toolkit that provides a cleaner alternative to managing state. Unlike computed signals, which only derive values reactively, linked Signals offer writable state — allowing manual updates when needed while maintaining reactivity.

In this post, we’ll explore why Effects can be an anti-pattern, how linked Signals provide a more maintainable approach, and how you can use them to improve your Angular apps. 😉

The Challenge of state synchronization

Let’s take a common example: A ProductChooserComponent that allows users to select a product and specify a quantity. Here’s a screenshot of such an application.

Clicking the plus button triggers the addProduct function, adding a new product. The total updates automatically whenever an item is added or removed.

export class ProductCardComponent {
  product = input.required<Product>();
  amount = signal(1);
  total = computed(() => this.amount() * this.product().total);
  
  nextProduct = output<void>();
  previousProduct = output<void>();

  addProduct() {
    this.amount.update(v => v + 1);
  }

  removeProduct() {
    this.amount.update(v => v - 1);
  }
}

The ProductCardComponent is a reusable component, meaning it accepts a product as input. If we switch the product — using an Angular output in the template to emit nextProduct or previousProduct — only the product updates, while the amount remains unchanged.

In other words, If a user adds 4 items of one product and then selects another, the amount remains at 4 instead of resetting. This results in unintended behavior. We need a way to ensure the amount updates in sync with the new product.

The Wrong Approach: Misusing Effects

One way to address this is to use an effect to reset the amount when the product changes:

#resetAmountEffect = effect(() => {
  this.product();
  this.amount.set(1);
});

While this works, it misuses Effects for state management. The issues with this approach include:

❌ Misuse of Effects: Effects are meant for handling side Effects (e.g., API calls, external updates), not for deriving or managing state.
❌ Separation of Concerns: Using Effects for state derivation blurs concerns, making the code harder to maintain and understand.
⚠️ Potential for Glitches: Since Effects run asynchronously, they introduce a risk of inconsistent states, which can lead to unexpected behavior.

The Better Solution: linked Signals ✅

Instead of an effect, we can use the new linked signal API, which is designed for state synchronization. Let’s refactor our component.

export class ProductCardComponent {
  product = input.required<Product>();
  amount = linkedSignal({
    source: this.product,
    computation: () => 1,
  });

  addProduct() {
    this.amount.update(v => v + 1);
  }

  removeProduct() {
    this.amount.update(v => v - 1);
  }
}

With this approach, the amount automatically resets when the product changes, while still allowing updates when adding or removing a product.

✅ Immediate updates: No async execution delays or glitches.
✅ Cleaner code: Avoiding unintended side Effects that disrupt state management.

By using linked Signals, we eliminate the effect entirely and simplify the logic while achieving the same behavior.

Beyond the Basics

The example above is just a glimpse of what’s possible with linked Signals. Want to explore more? Want to dive deeper into the linked Signals API? Check out our brand-new Angular Signals Masterclass eBook, where we dive into topics such as:

• More complex computation functions that rely on both source and previous values.

• Using linked Signals for client-side updates of fetched data to implement optimistic vs. pessimistic updates.

If you’re serious about writing modern, reactive, and maintainable Angular applications, mastering Signals is a must. This book covers everything you need to know — from why Signals matter to linked Signals and the roadmap ahead.

TL;DR

✅ Linked Signals allow you to derive state from a source signal while keeping it writable.
✅ Linked Signals eliminate the need for Effects when synchronizing state.
✅ Linked Signals simplify state management for dynamic UI interactions.
✅ Stop using Effects for state updates — use linked Signals instead!

Let me know what you think in the comments! Have you tried linked Signals yet? How are you using them in your Angular apps? 🔥