DEV Community

Dimitar Gaydardzhiev
Dimitar Gaydardzhiev

Posted on

Cold vs Hot Observables in RxJS Explained

#javascript #tutorial #webdev #beginners

Understanding the difference between cold and hot observables is essential when working with RxJS. Depending on how values are produced, observables fall into two categories Cold and Hot.

Cold Observables

A cold observable produces values internally and only starts producing them when someone subscribes. This means that each time an Observer subscribes, the Observable starts a new execution and produces a fresh set of values for that specific Observer.

A classic example of a cold observable is an HTTP request. In RxJS, the ajax() operator creates a cold observable:

const coldObservable$ = of('Movie 1', 'Movie 2', 'Movie 3');

coldObservable$.subscribe(value => console.log('Observer 1:', value));
coldObservable$.subscribe(value => console.log('Observer 2:', value));

// Output:
// Observer 1: Movie 1
// Observer 1: Movie 2
// Observer 1: Movie 3
// Observer 2: Movie 1
// Observer 2: Movie 2
// Observer 2: Movie 3
Enter fullscreen mode Exit fullscreen mode

In this case Observer 1 triggers an HTTP request, Observer 2 triggers another HTTP request. Each subscription causes the observable to run again. Both observers may receive the same values, but the executions are completely independent.

Hot Observables

Hot observables behave differently. Instead of generating values internally, hot observables receive values from external sources. These values are produced regardless of whether there are subscribers or not.

Examples of external sources include:

  • user input events
  • WebSocket messages
  • DOM events
  • timers
  • real-time data streams

Hot observables broadcast the same values to all subscribers. A simple example of a hot observable is a button click event. They are produced outside the Observable, and multiple Observers can receive the same events simultaneously:

const button = document.querySelector('button');
const hotObservable$ = fromEvent(button, 'click');

hotObservable$.subscribe(() => console.log('Observer 1: Button clicked'));
hotObservable$.subscribe(() => console.log('Observer 2: Button clicked'));

// Output:
// Observer 1: Button clicked
// Observer 2: Button clicked
Enter fullscreen mode Exit fullscreen mode

Why This Difference Matters

Understanding the difference between **cold **and **hot **observables is important when designing reactive systems.

Cold observables are useful when each subscriber should get fresh data
and/or operations must run independently. On the other hand, hot observables are ideal when multiple consumers need the same data stream.

Want to Go Deeper?

If you want to explore the topic further, I cover RxJS in much greater depth in my book Mastering RxJS from Scratch: A Step-by-Step Guide to Understanding RxJS.

The book is designed as a practical, step-by-step guide that helps developers understand RxJS from the ground up, explains the most important operators, and demonstrates how to apply reactive programming in real-world applications.

Top comments (0)