RxJS Subjects Explained: Subject vs BehaviorSubject vs ReplaySubject vs AsyncSubject 🚀

In RxJS, Subject, BehaviorSubject, ReplaySubject, and AsyncSubject are different types of subjects, which act as both an Observable and an Observer. Here's a breakdown:

---

🔹 1. Subject (Basic)

A Subject is a multicast Observable that emits values to multiple subscribers.

✅ Key Points:

• Does not store the last emitted value.
• New subscribers do not receive past values.
• Emits values only when subscribed.

✅ Example:

import { Subject } from 'rxjs';

const subject = new Subject();

subject.subscribe(value => console.log('Subscriber 1:', value));
subject.next(1);
subject.next(2);

subject.subscribe(value => console.log('Subscriber 2:', value));
subject.next(3);

📌 Output:

Subscriber 1: 1
Subscriber 1: 2
Subscriber 1: 3
Subscriber 2: 3

Subscriber 2 only receives 3, not previous values.

---

🔹 2. BehaviorSubject (Stores Last Value)

A BehaviorSubject stores the last emitted value and emits it immediately to new subscribers.

✅ Key Points:

• Requires an initial value.
• New subscribers immediately receive the last emitted value.
• Useful for maintaining state.

✅ Example:

import { BehaviorSubject } from 'rxjs';

const behaviorSubject = new BehaviorSubject(0); // Initial value is 0

behaviorSubject.subscribe(value => console.log('Subscriber 1:', value));
behaviorSubject.next(1);
behaviorSubject.next(2);

behaviorSubject.subscribe(value => console.log('Subscriber 2:', value));
behaviorSubject.next(3);

📌 Output:

Subscriber 1: 0
Subscriber 1: 1
Subscriber 1: 2
Subscriber 2: 2  // Gets the last emitted value
Subscriber 1: 3
Subscriber 2: 3

Subscriber 2 receives the last value (2) immediately.

---

🔹 3. ReplaySubject (Stores Multiple Past Values)

A ReplaySubject stores a buffer of past values and replays them to new subscribers.

✅ Key Points:

• Can store multiple past values (configurable).
• New subscribers receive the last X values.

✅ Example:

import { ReplaySubject } from 'rxjs';

const replaySubject = new ReplaySubject(2); // Stores last 2 values

replaySubject.next(1);
replaySubject.next(2);
replaySubject.next(3);

replaySubject.subscribe(value => console.log('Subscriber 1:', value));
replaySubject.next(4);

📌 Output:

Subscriber 1: 2  // Gets last 2 values
Subscriber 1: 3
Subscriber 1: 4

Subscriber 1 gets the last 2 values (2,3) immediately.

---

🔹 4. AsyncSubject (Emits Only Last Value)

An AsyncSubject emits only the last value and only when the subject completes.

✅ Key Points:

• Subscribers only get the last value before completion.
• Does not emit intermediate values.
• Useful for one-time events (e.g., API responses).

✅ Example:

import { AsyncSubject } from 'rxjs';

const asyncSubject = new AsyncSubject();

asyncSubject.subscribe(value => console.log('Subscriber 1:', value));

asyncSubject.next(1);
asyncSubject.next(2);
asyncSubject.next(3);

asyncSubject.complete(); // Emits only the last value

📌 Output:

Subscriber 1: 3

Only emits 3 after complete() is called.

---

🔥 Comparison Table

Feature	Subject	BehaviorSubject	ReplaySubject	AsyncSubject
Stores past values?	❌ No	✅ Yes (Last 1)	✅ Yes (Configurable)	✅ Yes (Only Last)
Needs an initial value?	❌ No	✅ Yes	❌ No	❌ No
New subscribers get past values?	❌ No	✅ Yes (Last 1)	✅ Yes (Multiple)	✅ Yes (Only Last, on complete)
Emits only on complete?	❌ No	❌ No	❌ No	✅ Yes
Use case	General event streaming	State management	Replay last X events	One-time final event

---

🔥 Which One to Use?

1. Subject → If you don't need to store previous values.
2. BehaviorSubject → If you need to store the latest value (e.g., user authentication state).
3. ReplaySubject → If you need to store multiple past values (e.g., chat history).
4. AsyncSubject → If you need only the last value after completion (e.g., API request).