Signal vs Computed vs Effect in Angular – Complete Guide (2026)

In this tutorial, you will clear the concept of Signal vs Computed vs Effect in Angular.

Signals are introduced in the advanced version of Angular. Signals are used to manage application state.

When working with Angular, three key concept appreas

1. signal()
2. computed()
3. effect()

What is a Signal in Angular?

A Signal is a reactive state container that stores a value. Signal will automatically notify dependent code when the value changes.

Example:

import { signal } from '@angular/core';
count = signal(0);
increment(){
  this.count.set(this.count() + 1);
}

Explanation:

signal() – It is used to store the state.

count() – It is used to read the value.

.set() – It is used to update the value.

What is Computed in Angular?

A computed signal derives its value from other signals.

It automatically updates when its dependencies change.

Example: In the below example is used to avoid manual recalculation.

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

price = signal(100);
tax = signal(10);

total = computed(() => this.price() + this.tax());

Note: If price or tax changes, total automatically recalculates.

What is Effect in Angular?

An effect runs a function whenever a signal changes.

Example:

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

count = signal(0);

constructor(){
  effect(() => {
    console.log("Count changed:", this.count());
  });
}

In this example, whenever the count changes, the effect function runs automatically.

Signal vs Computed vs Effect

Angular Example

In this example, we have a signal, computed, and effect.

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

@Component({
  selector: 'app-root',
  template: `
    <p>Price: {{price()}}</p>
    <p>Tax: {{tax()}}</p>
    <p>Total: {{total()}}</p>

    <button (click)="increasePrice()">Increase Price</button>
  `
})
export class AppComponent {

  price = signal(100);
  tax = signal(10);

  total = computed(() => this.price() + this.tax());

  constructor(){
    effect(()=>{
      console.log("Total changed:", this.total());
    });
  }

  increasePrice(){
    this.price.set(this.price() + 10);
  }

}

Explanation:

• signal stores the price and tax
• computed calculates the total
• effect logs when the total changes

When should we use Signal?

There are many reasons to use Signal

1. When we want to store application state

2. When we want to manage component data

3. When we want to create reactive variables.

Example:

userName = signal("John");

When should we use Computed?

There are many reasons to use Computed

1. When we want to calculate values from other signals.

2. When we want to create a derived state.

3. When we want to avoid manual recalculation.

Example:

fullName = computed(() => this.firstName() + " " + this.lastName());

When should we use Effect?

There are many reasons to use Effect

1. Performing side effects.

2. Logging changes.

3. Triggering external operations.

Example:

effect(() => {
  console.log(this.count());
});

Benefits of Angular Signals

There are many benefits of Angular Signals

1. It is used for faster change detection.

2. It is used for Cleaner reactive code.

3. It is used for Less boilerplate compared to RxJS

4. It is used to improve performance in large applications.

What are the Common Mistakes Developers Make?

There are many common mistakes Developers make

1. If you are using effect() for calculations instead of computed().

2. If you are updating signals incorrectly.

3. If you are using effects for simple state logic.

Conclusion

signal() → stores reactive state

computed() → derives values from signals

effect() → performs side effects when signals change