Stop Misusing Effects! Linked Signals Are the Better Alternative! - Angular Experts

share

The Angular renaissance, along with emerging reactive state management tools like Signals and Effects, frequently leads developers to employ Effects when synchronizing state.

Even though Effects serve a purpose, they are not intended mainly for keeping state aligned, and depending on them for that job can introduce avoidable intricacy.

With Angular 19, linked Signals arrive as a compelling new capability within the framework’s reactive suite, offering a more refined solution for state management. While computed signals merely compute values reactively, linked Signals establish writable state — enabling direct adjustments when needed without sacrificing reactivity.

This article examines why relying on Effects often becomes an anti-pattern, how linked Signals offer a more sustainable approach, and how adopting them can enhance your Angular applications. 😉

Why synchronizing state is tricky

Consider a typical scenario: a ProductChooserComponent lets a user pick a product and enter a quantity. A screenshot of this kind of interface appears below.

When the plus button is clicked, the addProduct function runs, which inserts a fresh product into the list. Any time a product is either added or removed, the total value refreshes on its own.

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 designed to be reusable, so it takes a product as its input. When we change the product — via an Angular output in the template that triggers nextProduct or previousProduct — only the product itself is refreshed, leaving the amount untouched.

This means that if someone adds 4 items of one product and then switches to a different one, the count stays at 4 rather than being cleared. That behavior is problematic. We must find a mechanism to keep the amount aligned with the newly selected product.

Why Effects Are the Wrong Tool Here

A common solution might be to deploy an effect that resets the amount whenever the product shifts:

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

This approach does function, but it wrongly applies Effects to state management. Here are the problems:

❌ Effect Misapplication: Effects serve side effects (like API calls or external sync), not state derivation or control.
❌ Blurred Responsibilities: Deriving state via Effects mixes concerns, reducing code clarity and maintainability.
⚠️ Glitch Risk: Effects run asynchronously, so they can cause inconsistent states, leading to unpredictable outcomes.

The Preferred Approach: linked Signals ✅

Rather than an effect, the newer linked signal API fits state synchronization. We’ll update our component accordingly.

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);
  }
}

Using this strategy, switching products triggers an automatic reset of the amount, yet manual changes remain possible when adding or removing items.

✅ Immediate updates: No delays or glitches tied to asynchronous execution.
✅ Cleaner code: Preventing unintended side Effects that interfere with state management.

Employing linked Signals removes the effect altogether, streamlining the logic while preserving the same outcome.

Beyond the Basics

The preceding illustration only scratches the surface of what linked Signals can do. Curious to learn more? Interested in a deeper look at the linked Signals API? Turn to our brand-new Angular Signals Masterclass eBook, which covers subjects including:

• Complex computation functions drawing on both the source signal and prior values.

• Applying linked Signals to local updates of fetched data, enabling optimistic versus pessimistic update patterns.

For anyone committed to building modern, reactive, and maintainable Angular applications, mastering Signals is essential. This book walks you through everything, from why Signals matter to linked Signals and the roadmap ahead.

TL;DR

✅ Linked Signals derive state from a source signal but remain writable.
✅ Linked Signals remove the necessity for Effects when syncing state.
✅ Linked Signals ease state management for dynamic UI interactions.
✅ Drop Effects for state updates — opt for linked Signals instead!

Share your thoughts below! Have you experimented with linked Signals yet? How are they showing up in your Angular projects? 🔥

Enjoy the code preview aesthetic? Check out our brand new theme plugin

Skol - the ultimate IDE theme

Craft better interfaces faster with Angular and AI

Angular + AI Video Training

Get ready to step into the future of Angular and master Signals today—no time to waste!

Angular Signals Masterclass eBook

Are you enjoying the read and eager to dig into Angular’s newest Signal Forms? Do not overlook it!

A Step-by-Step Approach to Angular Signal Forms

Occasionally, emails might contain extra promotional material; for specifics, check our Privacy policy.

Responses & comments

Feel free to ask questions and share your perspectives and personal insights about the subject

You might also like

Dive into the articles below from Angular Experts to explore more related topics, including Modern Angular !

Angular Signal Forms: Custom Controls Without ControlValueAccessor

Build reusable Angular custom controls with FormValueControl, model(), touch events, and schema-driven validation—without writing a ControlValueAccessor.

emoji_objects emoji_objects emoji_objects

Kevin Kreuzer

@nivekcode

Aug 12, 2026

7 min read

Angular Signal Forms: The Missing Create/Edit Pattern

Learn a practical Angular Signal Forms pattern for create and edit flows, with route-based mode, edit data loading, linkedSignal prefilling, submit branching, and validation context.

emoji_objects emoji_objects emoji_objects

Kevin Kreuzer

@nivekcode

Aug 1, 2026

6 min read

Angular Signal Forms Essentials

Understand the core concepts behind modern Angular Forms. Learn how to create Signal Forms, wire them up in templates, use built-in and custom validators, handle cross-field validation, submit forms, and more.

emoji_objects emoji_objects emoji_objects

Kevin Kreuzer

@nivekcode

Feb 14, 2026

12 min read

Leverage our deep expertise to drive your team forward

Throughout years of collaboration with both enterprises and startups, Angular Experts have honed their craft through consulting, conducting workshops and tutorials, and contributing to a wealth of open source projects. We take considerable pride in our front-end knowledge and would relish the chance to accelerate your business's growth