Angular Effects

Learn Angular Effects with practical examples, dependency tracking, cleanup, side effects, architecture diagrams, enterprise use cases, best practices, and interview questions.

Effects are one of the core building blocks of Angular Signals.

While Signals store reactive state and Computed Signals derive reactive values, Effects are responsible for executing side effects whenever dependent Signals change.

Effects automatically react to Signal updates and are commonly used for:

Logging
Saving data to Local Storage
Analytics
Calling third-party libraries
Synchronizing external systems
UI side effects

Effects are becoming an increasingly popular Angular interview topic.

What are Effects?
Why Use Effects?
Effects Architecture
Creating an Effect
Dependency Tracking
Cleanup
Effects vs Computed Signals
Enterprise Banking Example
Performance Best Practices
Common Mistakes
Top 10 Interview Questions
Summary

What are Effects?

An Effect is a reactive function that automatically runs whenever one of the Signals it reads changes.

Unlike computed(), an Effect does not return a value.

Instead, it performs some action.

Effects Architecture

flowchart LR

Signal

Signal --> Effect

Effect --> SideEffect

SideEffect --> ExternalSystem

Why Use Effects?

Without Effects

Manual event listeners
Repeated synchronization logic
Boilerplate code
Difficult maintenance

With Effects

Automatic execution
Cleaner architecture
Less boilerplate
Better maintainability

Creating an Effect

import {

signal,
effect

} from '@angular/core';

counter = signal(0);

effect(() => {

console.log(

this.counter()

);

});

Whenever counter changes,

the Effect runs automatically.

Effect Execution Flow

sequenceDiagram

participant Signal

participant Effect

participant Console

Signal->>Effect: Value Changed

Effect->>Console: Log New Value

Dependency Tracking

Effects automatically track every Signal they read.

firstName = signal('John');

lastName = signal('Doe');

effect(() => {

console.log(

`${this.firstName()} ${this.lastName()}`

);

});

Whenever either Signal changes,

the Effect executes again.

No dependency list is required.

Dependency Graph

flowchart TD

FirstName

LastName

FirstName --> Effect

LastName --> Effect

Effect --> Console

Local Storage Synchronization

One of the most common use cases.

theme = signal('light');

effect(() => {

localStorage.setItem(

'theme',

this.theme()

);

});

Whenever the theme changes,

Local Storage updates automatically.

Analytics Example

selectedPage = signal('Home');

effect(() => {

analytics.track(

'Page Changed',

{

page:

this.selectedPage()

}

);

});

Perfect for analytics integrations.

Logging Example

user = signal('Venu');

effect(() => {

console.log(

'Current User:',

this.user()

);

});

Useful during development and debugging.

Calling External Libraries

chartData = signal([]);

effect(() => {

chart.update(

this.chartData()

);

});

Effects help synchronize Signal state with external UI libraries.

Effect Lifecycle

flowchart TD

SignalUpdated

SignalUpdated --> EffectRuns

EffectRuns --> SideEffect

SideEffect --> WaitForNextChange

Cleanup

Some Effects create resources that need cleanup.

Examples:

Timers
WebSocket listeners
DOM listeners
Third-party subscriptions

Angular allows registering cleanup logic.

effect((onCleanup) => {

const timer = setInterval(() => {

console.log('Running');

}, 1000);

onCleanup(() => {

clearInterval(timer);

});

});

Cleanup executes before the Effect runs again and when the Effect is destroyed.

Cleanup Architecture

flowchart LR

Effect

Effect --> Resource

Resource --> Cleanup

Cleanup --> NewExecution

Effects vs Computed Signals

Effect	Computed
Performs side effects	Produces derived state
No return value	Returns a value
Used for logging, storage, analytics	Used for calculated values
May require cleanup	No cleanup required
Reactive	Reactive

When to Use Effects

Use Effects for:

Local Storage
Analytics
Logging
Chart updates
Browser APIs
Third-party libraries
Synchronizing external state

Avoid using Effects for:

Calculating totals
Formatting values
Derived UI state

Use computed() instead.

Effect vs Computed Architecture

flowchart TD

Signal

Signal --> Computed

Computed --> UI

Signal --> Effect

Effect --> LocalStorage

Effect --> Analytics

Effect --> Logging

Enterprise Banking Example

Online Banking Dashboard

Signals

Current Customer
Theme
Selected Account
Notification Count

Effects

Save dashboard preferences
Log security events
Update analytics
Refresh external charts
Synchronize browser storage

Architecture

flowchart TD

Signals

Signals --> Effects

Effects --> Analytics

Effects --> LocalStorage

Effects --> Monitoring

Effects --> AuditLogs

Benefits

Automatic synchronization
Cleaner architecture
Less boilerplate
Better observability
Easier maintenance

Performance Best Practices

Practice	Benefit
Keep Effects small	Faster execution
Use `computed()` for derived state	Better architecture
Register cleanup for long-lived resources	Prevent resource leaks
Avoid unnecessary Signal reads	Reduce re-execution
Limit expensive work	Better responsiveness
Separate business logic from side effects	Cleaner code

Common Mistakes

Using Effects for Derived Values

❌ Wrong

effect(() => {

this.total.set(

this.price() + this.tax()

);

});

✅ Correct

total = computed(() =>

this.price() + this.tax()

);

Heavy Business Logic Inside Effects

Effects should coordinate side effects, not contain complex business rules.

Move business logic into services or use computed() for derived state.

Forgetting Cleanup

Incorrect

effect(() => {

setInterval(() => {

console.log('Tick');

},1000);

});

Each re-execution creates another timer.

Correct

effect((onCleanup)=>{

const timer = setInterval(()=>{

console.log('Tick');

},1000);

onCleanup(()=>{

clearInterval(timer);

});

});

Reading Unnecessary Signals

Every Signal read becomes a dependency.

Only read the Signals needed for the Effect.

Updating Signals Inside Effects Unnecessarily

Avoid creating loops where an Effect repeatedly updates the same Signal that triggered it.

Design state flow carefully to prevent circular updates.

Best Practices

Use Effects only for side effects.
Use computed() for derived values.
Register cleanup for external resources.
Keep Effects focused.
Minimize dependencies.
Avoid circular updates.
Move business logic into services.
Use Effects for browser APIs and integrations.
Test side-effect behavior.
Keep Effects predictable and easy to understand.

Advantages

Feature	Benefit
Automatic Dependency Tracking	Less code
No Manual Event Wiring	Simpler implementation
Browser Integration	Easy synchronization
Cleanup Support	Prevents leaks
Reactive Execution	Automatic updates
Enterprise Ready	Excellent for integrations

Interview Cheat Sheet

Requirement	Solution
Side Effects	`effect()`
Derived State	`computed()`
Logging	`effect()`
Analytics	`effect()`
Local Storage	`effect()`
Cleanup	`onCleanup()`
Automatic Dependencies	Yes
Manual Subscription	Not Required
Returns Value	No
Best Use Case	External synchronization

Summary

Angular Effects provide a clean and reactive way to synchronize Signal changes with external systems. They automatically track dependencies, rerun when those dependencies change, and support cleanup for resources such as timers and event listeners. By using effect() for side effects and computed() for derived state, developers can build Angular applications that are maintainable, performant, and aligned with modern reactive design principles.

Key Takeaways

✔ Effects perform side effects, not calculations.
✔ Angular automatically tracks Signal dependencies.
✔ Effects rerun when dependent Signals change.
✔ Use onCleanup() for timers, listeners, and external resources.
✔ Keep Effects small and focused.
✔ Use computed() for derived values.
✔ Avoid circular Signal updates.
✔ Effects integrate well with browser APIs and third-party libraries.
✔ Effects simplify synchronization with external systems.
✔ Angular Effects are a key modern Angular interview topic.

➡️ 84-Signal-Inputs-QA.md

Angular Effects

Table of Contents

What are Effects?

Effects Architecture

Why Use Effects?

Creating an Effect

Effect Execution Flow

Dependency Tracking

Dependency Graph

Local Storage Synchronization

Analytics Example

Logging Example

Calling External Libraries

Effect Lifecycle

Cleanup

Cleanup Architecture

Effects vs Computed Signals

When to Use Effects

Effect vs Computed Architecture

Enterprise Banking Example

Performance Best Practices

Common Mistakes

Using Effects for Derived Values

Heavy Business Logic Inside Effects

Forgetting Cleanup

Reading Unnecessary Signals

Updating Signals Inside Effects Unnecessarily

Best Practices

Advantages

Top 10 Angular Effects Interview Questions

1. What is an Angular Effect?

2. What is the purpose of an Effect?

3. What is the difference between effect() and computed()?

4. How does Angular know when an Effect should run?

5. Can an Effect return a value?

6. When should cleanup be used?

7. Can an Effect read multiple Signals?

8. Should business logic be placed inside Effects?

9. What are common enterprise use cases for Effects?

10. What are Angular Effects best practices?

Interview Cheat Sheet

Summary

Key Takeaways

Next Article

3. What is the difference between `effect()` and `computed()`?