Subject vs BehaviorSubject vs ReplaySubject in Angular

Question

I've been looking to understand those 3:

• Subject
• BehaviorSubject
• ReplaySubject

I would like to use them and know when and why, what are the benefits of using them and although I've read the documentation, watched tutorials and searched google I've failed to make any sense of this.

So what are their purpose? A real-world case would be most appreciated it does not have to even code.

I would prefer a clean explanation not just "a+b => c you are subscribed to ...."

Thank you

Chug

There's already a question with behaviour subject with observable; #39494558 and documentation on replay subject is clear imo github.com/Reactive-Extensions/RxJS/blob/master/doc/api/… – Sentient

There is a relatively thorough presentation of the subjects in Rxjs in this answer, which complements nicely the answer from peeksilet. This includes also important details about behaviour after termination, so it is good to have a look. – Pelting

Answer 1

It really comes down to behavior and semantics. With a

• Subject - a subscriber will only get published values that were emitted after the subscription. Ask yourself, is that what you want? Does the subscriber need to know anything about previous values? If not, then you can use this, otherwise choose one of the others. For example, with component-to-component communication. Say you have a component that publishes events for other components on a button click. You can use a service with a subject to communicate.

• BehaviorSubject - the last value is cached. A subscriber will get the latest value upon initial subscription. The semantics for this subject is to represent a value that changes over time. For example a logged in user. The initial user might be an anonymous user. But once a user logs in, then the new value is the authenticated user state.

  The BehaviorSubject is initialized with an initial value. This is sometimes important to coding preference. Say for instance you initialize it with a null. Then in your subscription, you need to do a null check. Maybe OK, or maybe annoying.

• ReplaySubject - it can cache up to a specified number of emissions. Any subscribers will get all the cached values upon subscription. When would you need this behavior? Honestly, I have not had any need for such behavior, except for the following case:

  If you initialize a ReplaySubject with a buffer size of 1, then it actually behaves just like a BehaviorSubject. The last value is always cached, so it acts like a value changing over time. With this, there is no need for a null check like in the case of the BehaviorSubject initialized with a null. In this instance, no value is ever emitted to the subscriber until the first publishing.

So it really comes down to the behavior you are expecting (as for which one to use). Most of the time you will probably want to use a BehaviorSubject because what you really want to represent is that "value over time" semantic. But I personally don't see anything wrong with the substitution of ReplaySubject initialized with 1.

What you want to avoid is using the vanilla Subject when what you really need is some caching behavior. Take for example you are writing a routing guard or a resolve. You fetch some data in that guard and set it in a service Subject. Then in the routed component you subscribe to the service subject to try to get that value that was emitted in the guard. OOPs. Where's the value? It was already emitted, DUH. Use a "caching" subject!

See also:

• What are RxJS Subject's and the benefits of using them?

Confab

This is short and easy to understand the differences. When the value changes in the service and the components also change that the value is shown, then BehaviourSubjects or Replay Subject is the solution. – Boob

Isn't ReplaySubject good for lazy subscribers that need to know everything? Say your observable is tracking some events for multiple items. When another item gets loaded, you'd need to know the last value for that item, not the last value. – Hem

Thank you! ReplaySubject with a buffer size of 1 was exactly what I needed. I had a route guard that needed the value, but needed to wait for the first emission. So a BehaviorSubject was not cutting it, as I didn't want an initial value (null wouldn't work either because I was using it to signify a state) – Koralle

@menehune23 I also needed ReplaySubject for an Angular resolve guard class. My data service could be asynchronous, or synchronous (if the data had been retrieved already). If it was synchronous, the Subject.next() was being fired before the resolve function had returned and been subscribed to by Angular internally. BehaviourSubject would possibly work, but I would have to explicilily call complete() and also add in null checks for the initial value. What worked was new ReplaySubject<DataType>(1) and resolveSubject.asObservable().take(1).map(....) – Piatt

I am using a ReplaySubject with buffer size of 1 but for some reason when I get an Observable with .asObservable() the Observable send a value of null to subscribers before I ever call next() on my ReplaySubject. I thought it wasn't supposed to have an initial value unlike BehaviorSubject? – Disparate

ReplaySubject with a buffer of 1 is different from BehaviorSubject in that ReplaySubject will block the subscriber waiting for the first value whereas BehaviorSubject requires an initial value when created. Often you want to fetch data lazily on demand and not have any initial value. – Misplace

You talk of after the subscription. When does this happen ? What can happen before ? – Jayjaycee

I got it now medium.com/@luukgruijs/… – Jayjaycee

"If you initialize a ReplaySubject with a buffer size of 1, then it actually behaves just like a BehaviorSubject": This is not totally true; check this great blog post on differences between those two. For example if you subscribe to a completed BehaviorSubject, you won’t receive the last value but for a ReplaySubject(1) you will receive the last value. – Destinee

I think a pretty easy example you could mention for replay subject would be for a "chatroom" or game lobby scenario where you want new joiners to see the last 10 messages. – Dilapidation

ReplaySubject and AsyncSubject have the same behavior. Its just that AsyncSubject will only emit when calling its complete() method. BehaviorSubject is something like a synchronous object because of the initial value set in its constructor. I find those three Subjects to be more useful than the plain Subject because of the caching – Maleeny

Another difference between BehaviorSubject and ReplaySubject(1) is that the latter will not emit a value unless next() is called. This is not the case for BehaviorSubject, as it will always emit a value. – Jacquelinjacqueline

I will just add to this rxjs.dev/api/index/class/ReplaySubject look at the Differences with BehaviorSubject section – Analogize

this comment must be added to angular official documentation – Branchiopod

Answer 2

1. Subject: On subscribing it always gets the data which is pushed after its subscription i.e. previously pushed values are not received.

const mySubject = new Rx.Subject();

mySubject.next(1);

const subscription1 = mySubject.subscribe(x => {
  console.log('From subscription 1:', x);
});

mySubject.next(2);

const subscription2 = mySubject.subscribe(x => {
  console.log('From subscription 2:', x);
});

mySubject.next(3);

subscription1.unsubscribe();

mySubject.next(4);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.12/Rx.min.js"></script>

With this example, here’s the result that’ll be printed in the console:

From subscription 1: 2  
From subscription 1: 3  
From subscription 2: 3  
From subscription 2: 4  

Note how subscriptions that arrive late are missing out on some of the data that’s been pushed into the subject.

2. Replay subjects: can help by keeping a buffer of previous values that will be emitted to new subscriptions.

Here’s a usage example for replay subjects where a buffer of 2 previous values are kept and emitted on new subscriptions:

const mySubject = new Rx.ReplaySubject(2);

mySubject.next(1);
mySubject.next(2);
mySubject.next(3);
mySubject.next(4);

mySubject.subscribe(x => {
  console.log('From 1st sub:', x);
});

mySubject.next(5);

mySubject.subscribe(x => {
  console.log('From 2nd sub:', x);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.12/Rx.min.js"></script>

Here’s what that gives us at the console:

From 1st sub: 3
From 1st sub: 4
From 1st sub: 5
From 2nd sub: 4
From 2nd sub: 5

3. Behavior subjects: are similar to replay subjects, but will re-emit only the last emitted value, or a default value if no value has been previously emitted:

const mySubject = new Rx.BehaviorSubject('Hey now!');

mySubject.subscribe(x => {
  console.log('From 1st sub:', x);
});

mySubject.next(5);

mySubject.subscribe(x => {
  console.log('From 2nd sub:', x);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.12/Rx.min.js"></script>

And the result:

From 1st sub: Hey now!
From 1st sub: 5
From 2nd sub: 5

Reference: https://alligator.io/rxjs/subjects/

Komsomol

The reference article is really helpful – Seigneury

Answer 3

A handy summary of the different observable types, non intuitive naming i know lol.

• Subject - A subscriber will only get published values thereon-after the subscription is made.
• BehaviorSubject - New subscribers get the last published value OR initial value immediately upon subscription.
• ReplaySubject - New subscribers get all previously published value(s) immediately upon subscription

Acolyte

1-n published values? So if there were 2 published values a ReplaySubject would produce -1 published values??? – Potato

@JasonCheng no it retrieves all previously published values upon subscription, update answer :) – Acolyte

Answer 4

Most upvoted answer is plainly wrong claiming that:

"If you initialize a ReplaySubject with a buffer size of 1, then it actually behaves just like a BehaviorSubject"

---

This is not totally true; check this great blog post on differences between those two. For example if you subscribe to a completed BehaviorSubject, you won’t receive the last value but for a ReplaySubject(1) you will receive the last value.

This is am important difference that should not be overlooked:

const behavior = new BehaviorSubject(null);
const replay = new ReplaySubject(1);

behavior.skip(1).subscribe(v => console.log('BehaviorSubject:', v));
replay.subscribe(v => console.log('ReplaySubject:', v));

behavior.next(1);
behavior.next(2);
behavior.complete();
behavior.subscribe(v => console.log('Late B subscriber:', v));

replay.next(1);
replay.next(2);
replay.complete();
replay.subscribe(v => console.log('Late R subscriber:', v));

Check this code example here which comes from another great blog post on the topic.

Destinee

Answer 5

From: Randall Koutnik's book “Build Reactive Websites with RxJS.” :

A Subject is an object that’s a turbocharged observable. At its core, a Subject acts much like a regular observable, but each subscription is hooked into the same source. Subjects also are observers and have next, error, and done methods to send data to all subscribers at once. Because subjects are observers, they can be passed directly into a subscribe call, and all the events from the original observable will be sent through the subject to its subscribers.

We can use the ReplaySubject to track history. A ReplaySubject records the last n events and plays them back to every new subscriber. For example in a chat applications. We can use it for tracking the record of previous chat history.

A BehaviorSubject is a simplified version of the ReplaySubject. The ReplaySubject stored an arbitrary number of events, the BehaviorSubject only records the value of the latest event. Whenever a BehaviorSubject records a new subscription, it emits the latest value to the subscriber as well as any new values that are passed in. The BehaviorSubject is useful when dealing with single units of state, such as configuration options.

Vermilion

Answer 6

As mentioned in some of the posts, the accepted answer is wrong since BehaviorSubject != ReplaySubject(1) and it's not just a preference of coding style.

In the comments often the "guards" are mentioned and that's also where I most often found the use case for the Replay subjects. More specifically if you have a take(1) like scenario and you don't just want to take the initial value.

Check for example the following:

  ngOnInit() {
    const behaviorSubject = new BehaviorSubject<boolean>(null);
    const replaySubject = new ReplaySubject<boolean>(1);
    this.checkLoggedIn(behaviorSubject, 'behaviorSubject');
    this.checkLoggedIn(replaySubject, 'replaySubject');
    behaviorSubject.next(true);
    replaySubject.next(true);
  }

  checkLoggedIn($userLoggedIn: Observable<boolean>, id: string) {
    $userLoggedIn.pipe(take(1)).subscribe(isLoggedIn => {
      if (isLoggedIn) {
        this.result[id] = 'routed to dashboard';
      } else {
        this.result[id] = 'routed to landing page';
      }
    });
  }

with the result:

{
  "behaviorSubject": "routed to landing page",
  "replaySubject": "routed to dashboard"
}

In those cases clearly you'd want a ReplaySubject! Working code: https://stackblitz.com/edit/replaysubject-vs-behaviorsubject?file=src%2Fapp%2Fapp.component.ts

Scram

Answer 7

     // ***********Subject  concept ***********
    let subject = new Subject<string>();


    subject.next("Eureka");
    subject.subscribe((data) => {
      console.log("Subscriber 1 got data >>>>> "+ data);
    });
    subject.subscribe((data) => {
      console.log("Subscriber 2 got data >>>>> "+ data);
    });

       // ********behaviour subject*********
    // Behavior subjects need a first value
let subject1 = new BehaviorSubject<string>("First value");


subject1.asObservable().subscribe((data) => {
  console.log("First subscriber got data behaviour subject>>>>> "+ data);
});
subject1.next("Second value")

• Subject - A subscriber will only get published values thereon-after the subscription is made.
• BehaviorSubject - New subscribers get the last published value OR initial value immediately upon subscription.

Phidias

Answer 8

Another difference is you can use the value getter of BehaviorSubject to get the current value. This is very useful when you need just current value in certain circumstances. For example, when a user clicks something and you need the value only once. In this case, you don't need to subscribe and then unsubscribe suddenly. The only need is:

BehaviorSubject bSubject = new BehaviorSubject<IBasket>(basket);

getCurrentBasketValue() {
  return this.bSubject.value;
}

Burke