What is the difference between BehaviorSubject and Observable?

javascript

observable-patterns

subject-usage

angular-best-practices

byAlex Kataev·Dec 22, 2024

A BehaviorSubject is a type of Observable that always has a current value and immediately supplies this to any new subscribers.

BehaviorSubject:

Emit the last emitted item to new subscribers.
Easily access the current value with behaviorSubject.getValue().

Observable:

A standard Observable does not retain a current value, it only pushes values when emitted.

Example to illustrate:

// BehaviorSubject always has a current value, like your debt!
const behaviorSubject = new BehaviorSubject(10);
behaviorSubject.subscribe(value => console.log('BehaviorSubject:', value)); // Outputs: 10

// Observable doesn't keep track of any value, very Zen indeed!
const observable = new Observable(observer => observer.next(20));
observable.subscribe(value => console.log('Observable:', value)); // Outputs: 20 if you subscribed on time!

When you subscribe to a BehaviorSubject, you immediately get its current value. An Observable, on the other hand, only notifies you when a new value is emitted.

When to use BehaviorSubject?

BehaviorSubject works best when you need to share an up-to-date value across multiple subscribers. For example, in an Angular app where real-time value-sharing is paramount, BehaviorSubject allows for:

Syncing user authentication status across components
Facilitating global theme toggling
Acting as a cache for current data

However, when exposing BehaviorSubject, it's common to use asObservable() to hide its capabilities (like next). This prevents any external components from emitting their own values.

When should you use Observable?

Observable is the go-to for simple data flows that do not require state management. Think one-off HTTP requests, user input events, or interval-based operations:

Fetching data from a server
Tracking form input changes
Ticking down a timer

Just remember, all Observables are cold by default. This means that each subscription triggers a separate execution, with no leaks between observers.

Other considerations and alternatives

ReplaySubject is like a hyped-up version of BehaviorSubject. It can be configured to replay any number of previous values to new subscribers, handy when late arrivals should catch up on past events.

The additional perks of BehaviorSubject

One standout feature of BehaviorSubject is its ability to multicast to multiple observers, acting as a hot observable. This is especially important when you want to:

Broadcast updates across the app
Share one subscription with side-effects like a WebSocket connection
Ensure data consistency across components

As both an Observer and an Observable, BehaviorSubject can subscribe to and emit values, playing both the DJ and listener!

Avoid these pitfalls

While using BehaviorSubject, unforeseen issues can pop up. Calling getValue outside of Angular's zone can lead to change detection challenges. Also, directly exposing BehaviorSubject instead of as Observable might invite unintended emissions.

The primary concern with Observables is managing subscriptions properly to avoid creating memory leaks, a catchy number that can lead to some serious performance blues.

explain-codes / Javascript / What is the difference between BehaviorSubject and Observable?

Linked

Subject vs BehaviorSubject vs ReplaySubject in Angular



Angular window resize event



Detecting real time window size changes in Angular 4



Angular HTTP GET with TypeScript error http.get(...).map is not a function in [null]



Can one AngularJS controller call another?

