What is the difference between Subject and BehaviorSubject?

Question

I'm not clear on the difference between a Subject and a BehaviorSubject. Is it just that a BehaviorSubject has the getValue() function?

Solution 1

A BehaviorSubject holds one value. When it is subscribed it emits the value immediately. A Subject doesn't hold a value.

Subject example (with RxJS 5 API):

const subject = new Rx.Subject();
subject.next(1);
subject.subscribe(x => console.log(x));

Console output will be empty

BehaviorSubject example:

const subject = new Rx.BehaviorSubject(0);
subject.next(1);
subject.subscribe(x => console.log(x));

Console output: 1

In addition:

• BehaviorSubject should be created with an initial value: new Rx.BehaviorSubject(1)
• Consider ReplaySubject if you want the subject to get previously publised values.

Solution 2

BehaviourSubject

BehaviourSubject will return the initial value or the current value on Subscription

var bSubject= new Rx.BehaviorSubject(0);  // 0 is the initial value

bSubject.subscribe({
  next: (v) => console.log('observerA: ' + v)  // output initial value, then new values on `next` triggers
});

bSubject.next(1);  // output new value 1 for 'observer A'
bSubject.next(2);  // output new value 2 for 'observer A', current value 2 for 'Observer B' on subscription

bSubject.subscribe({
  next: (v) => console.log('observerB: ' + v)  // output current value 2, then new values on `next` triggers
});

bSubject.next(3);

With output:

observerA: 0
observerA: 1
observerA: 2
observerB: 2
observerA: 3
observerB: 3

Subject

Subject does not return the current value on Subscription. It triggers only on .next(value) call and return/output the value

var subject = new Rx.Subject();

subject.next(1); //Subjects will not output this value

subject.subscribe({
  next: (v) => console.log('observerA: ' + v)
});
subject.subscribe({
  next: (v) => console.log('observerB: ' + v)
});

subject.next(2);
subject.next(3);

With the following output on the console:

observerA: 2
observerB: 2
observerA: 3
observerB: 3

Solution 3

I just created a project which explain what is the difference between all subjects:
https://github.com/piecioshka/rxjs-subject-vs-behavior-vs-replay-vs-async

Solution 4

BehaviorSubject keeps in memory the last value that was emitted by the observable. A regular Subject doesn't.

BehaviorSubject is like ReplaySubject with a buffer size of 1.

UPDATE: There are edge use cases that distinguish those two. https://medium.com/javascript-everyday/behaviorsubject-vs-replaysubject-1-beware-of-edge-cases-b361153d9ccf

TLDR: If you want to provide an initial value at subscription time, even if nothing has been pushed to a Subject so far, use the BehaviorSubject. If you want to have the last value replayed to an observer, even if a Subject is already closed, use the ReplaySubject(1).

Solution 5

It might help you to understand.

import * as Rx from 'rxjs';

const subject1 = new Rx.Subject();
subject1.next(1);
subject1.subscribe(x => console.log(x)); // will print nothing -> because we subscribed after the emission and it does not hold the value.

const subject2 = new Rx.Subject();
subject2.subscribe(x => console.log(x)); // print 1 -> because the emission happend after the subscription.
subject2.next(1);

const behavSubject1 = new Rx.BehaviorSubject(1);
behavSubject1.next(2);
behavSubject1.subscribe(x => console.log(x)); // print 2 -> because it holds the value.

const behavSubject2 = new Rx.BehaviorSubject(1);
behavSubject2.subscribe(x => console.log('val:', x)); // print 1 -> default value
behavSubject2.next(2) // just because of next emission will print 2 

View more solutions

Comments

[Davy]

Its also more correct : "BehaviourSubject will return the initial value or the current value on Subscription" is a better explanation than "A BehaviorSubject holds one value."

[Eric Huang]

So do you mean you have to subscribe to subject before subject.next() to for this to work?

[onefootswill]

@eric for Subject, yes. That is the distinction.

[mrmashal]

Note that you have to pass in the first value to BehaviorSubject's constructor ;)

[Fredrik_Borgstrom]

I put the code above on Stackblitz: stackblitz.com/edit/rxjs-subjectvsbehaviorsubject

[OPV]

Where is observerB: 3?

[Mohammed Safeer]

@OPV ObserverB: 3 is there while you call subject.next(3);

[user2900572]

if we create subject with boolean even subject emits rite?? const subject = new Subject<boolean>(); subject.next(true);

[Jonathan Stellwag]

If it helps: Subjects = Event - BehaviorSubject = State;

[Sergey]

When you say "A Subject doesn't hold a value" it's kind of confusing. If you show one more example for "Subject" where you subscribe first and then call .next(1), it will make your answer a lot more clear.

[Sivashankar]

simple and superb hints..Thanks!

[minus one]

Often, we do not have the initial value, since we would like to convert an observable to behavior subject: don't worry about the initial value, just use some 'empty' value.

[Ursus Schneider]

@Rad thank you for you explanation -> it really made sense to me 😊

[Tom]

Wow, I wish the official documentation would be that simple and helpful, thanks!