Cold vs. Hot Observables

Hello! Welcome back to our series on RxJS.

In our last lesson, we established that an Observable is a lazy producer of values, executing its logic only when a consumer subscribes. This behavior is the default for most Observables you'll encounter, and it forms the basis of what we call a cold Observable.

Today, we will explore one of the most fundamental and often confusing concepts in RxJS: the distinction between cold and hot Observables. Understanding this difference is critical for managing side effects, sharing resources like network connections, and building efficient, predictable applications.

This lesson will explain the execution semantics of both types, focusing on the key difference: where the data producer is created and managed.

1. The Core Distinction: Producer Location

The difference between a cold and a hot Observable boils down to one simple question: Where does the producer of the values live?

• Cold Observable: The producer is created inside the Observable. Every time you subscribe, you get a brand new producer, and the sequence of values starts from the beginning, just for you.
• Hot Observable: The producer exists outside the Observable. When you subscribe, you are tapping into a value stream that is already flowing, regardless of whether you are listening or not.

This distinction determines whether values are unicast (sent to a single subscriber) or multicast (sent to multiple subscribers).

Let's dive into the details of each type.

2. Cold Observables: Independent Executions

As we learned in the previous lesson, Observables are lazy. The function you pass to the Observable constructor doesn't run until .subscribe() is called. This is the defining characteristic of a cold Observable.

Because the producer is created and activated upon subscription, each subscriber gets its own private, independent execution.

Think of it like watching a video on YouTube. When you press play, you get your own personal playback that starts from the beginning. Your viewing experience is completely separate from anyone else watching the same video.

To see this in action, let's watch a video that defines and demonstrates cold behavior.

This concept is also explained very clearly by Ben Lesh, the lead of the RxJS project.

To summarize cold Observables:

• Producer: Created and activated inside the subscription logic.
• Execution: Lazy. Starts only on subscription.
• Data Sharing: None. Each subscription gets a new, independent execution (unicast).
• Example: An HTTP request Observable. Each subscription should trigger a new HTTP call.

3. Hot Observables: Shared Executions

A hot Observable is one whose producer is created or activated outside of the subscription. The producer is running and producing values independently. When you subscribe, you are simply plugging into that existing stream.

Think of a live radio broadcast. When you tune your radio to a station, you hear whatever is being broadcast at that moment. You don't cause the broadcast to start over, and everyone else listening hears the same thing at the same time. If you tune in late, you've missed the beginning.

Let's see how we can turn our cold example into a hot one.

The key insight is that the source of values is now shared. This is called multicasting.

This article provides another clear, concise explanation with a code example.

To summarize hot Observables:

• Producer: Exists outside the subscription logic; it's shared.
• Execution: Can be happening before or without any subscriptions.
• Data Sharing: Yes. All subscribers listen to the same shared execution (multicast).
• Example: An Observable of mouse clicks on the page. The clicks happen whether or not any code is subscribed to listen for them.

4. Why This Matters: Resource Management and Subjects

Why would you want a hot Observable? The primary reason is to share a single subscription to an expensive or singular resource. Imagine an Observable that wraps a WebSocket connection. If it were cold, every subscriber would create a new, separate WebSocket connection to the server, which is inefficient and often incorrect.

So, how do we convert a cold Observable to a hot one in a controlled way? The most fundamental tool for this is a Subject.

A Subject is a special type of Observable that is also an Observer. It can receive values (acting as an Observer) and also emit them to its own subscribers (acting as an Observable). By subscribing a Subject to a cold Observable, the Subject becomes the single consumer of the cold source. Other parts of your application can then subscribe to the Subject, which will multicast the values it receives.

We will dedicate an entire module to Subjects later, but for now, it's important to understand their role as the bridge that allows a single cold execution to be shared among many consumers. RxJS provides operators like share() and shareReplay() that use Subjects internally to perform this cold-to-hot conversion elegantly.

Conclusion

Today we've dissected the crucial difference between cold and hot Observables. Mastering this concept is key to writing predictable and efficient RxJS code.

Key Takeaways:

• The defining factor is the location of the producer.
• Cold Observables create a producer for each subscription (unicast). They are lazy and start on demand. This is the default and most common type.
• Hot Observables share a single, external producer among all subscribers (multicast). They are essential for sharing resources and managing events that happen regardless of subscriptions.
• Subjects are the primary mechanism for converting a cold Observable into a hot one by acting as a multicasting proxy.

Feature	Cold Observable	Hot Observable
Producer Location	Created inside the Observable	Created outside the Observable
Execution	Starts on subscribe()	Independent of subscribe()
Data Sharing	Unicast (1 producer per subscriber)	Multicast (1 shared producer for all)
Analogy	On-demand video (YouTube)	Live broadcast (Radio)
Common Example	new Observable, of, from, ajax	fromEvent, Subjects

In our next lesson, we will start creating Observables from various sources using built-in RxJS functions. As we explore of, from, and fromEvent, try to identify whether each one creates a cold or a hot Observable based on what you've learned today.