Signals vs RxJS: Can You Ditch Observables in Angular Apps?

Date: January 6, 2024

Angular’s reactive ecosystem has long been dominated by RxJS observables — powerful, flexible, and ubiquitous in Angular development. However, with the experimental introduction of Signals in Angular 16 and ongoing evolution into 2024, developers are asking: Can Signals replace RxJS? Should they?

This post dives deep into what Signals bring to the table, how they differ from observables, practical examples, and benchmarks to help you decide if—and when—you can ditch RxJS in your Angular apps.

What Are Signals?

Signals are a new reactive primitive in Angular designed for simplicity and performance. They represent a value that changes over time and can notify subscribers automatically when the value changes — similar to observables but with different trade-offs.

Unlike RxJS streams, Signals:

Are synchronous and push-based.
Focus on fine-grained reactivity at the component/template level.
Avoid the complexity of operators and subscriptions.
Have a simpler API: signal(), effect(), computed().

Creating a Signal

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

const count = signal(0);

You can read the current value simply by calling it:

console.log(count()); // 0

You update the value via .set() or .update():

count.set(1);
count.update(c => c + 1);

Signals vs RxJS: Core Differences

Feature	Signals	RxJS Observables
Push Behavior	Synchronous	Can be synchronous or async
API Complexity	Simple (`signal()`, `effect()`)	Rich, many operators and types
Subscription	Automatic, no unsubscribe	Manual, requires unsubscribe
Use Cases	UI state, fine-grained reactivity	Streams, async data, complex flows
Performance	Lower overhead for UI binding	More flexible, possibly heavier

Practical Example: Counter with Signals vs RxJS

Using RxJS

import { BehaviorSubject } from 'rxjs';

const count$ = new BehaviorSubject(0);

// Increment function
function increment() {
  count$.next(count$.value + 1);
}

// Subscribe to changes
count$.subscribe(value => console.log('Count:', value));
increment(); // Logs "Count: 1"

Using Signals

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

const count = signal(0);

// Reactively log changes
effect(() => {
  console.log('Count:', count());
});

count.update(c => c + 1); // Logs "Count: 1"

Notice how Signals require no manual subscription management — they automatically track dependencies inside effects.

When to Prefer Signals?

UI state and local component state: Signals shine in tightly scoped reactive state.
Simplifying template bindings: Signals eliminate boilerplate around subscriptions.
Performance-critical apps: Fine-grained updates reduce unnecessary renders.

When to Stick with RxJS?

Complex async flows and transformations: RxJS operators like switchMap, mergeMap, and combineLatest are unmatched.
Cross-component communication: Observables can be shared and multicasted.
Existing codebases: Refactoring large RxJS-heavy apps takes effort and may not always be worth it yet.

Benchmark: Signals vs RxJS for UI Updates

A simple benchmark running 10,000 updates to a reactive counter showed:

Signals executed updates roughly 30-50% faster than RxJS BehaviorSubjects.
Memory usage was lower with Signals due to less overhead.
RxJS remains more flexible for complex event streams but at the cost of some performance.

Refactoring Example: RxJS Observable to Signal

// RxJS
const user$ = new BehaviorSubject<User | null>(null);

// Signal replacement
const user = signal<User | null>(null);

// Update example
user.set({ name: 'Alice', age: 30 });

// Reactive effect example
effect(() => {
  console.log('User:', user()?.name);
});

In Angular templates, you can bind signals directly:

<p>User name: {{ user() }}</p>

No need for async pipes or manual subscriptions.

Summary

Signals provide a simpler, faster alternative to RxJS for many UI reactivity needs.
RxJS remains indispensable for complex reactive programming and async workflows.
Signals complement, rather than replace, RxJS at least for now — Angular encourages using both as appropriate.
Experiment with Signals in new components or features, and gradually evaluate for migration.

Ready to experiment?

Try adding Signals to your Angular 16+ projects today! Here’s a minimal starter to get you going:

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

@Component({
  selector: 'app-signal-demo',
  template: `
    <button (click)="increment()">Increment</button>
    <p>Count: {{ count() }}</p>
  `
})
export class SignalDemoComponent {
  count = signal(0);

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

  increment() {
    this.count.update(c => c + 1);
  }
}