Blog

In RxJS, “cold” and “hot” observables refer to two different ways of handling data streams.

Exploring Cold observables

Cold observables start producing data when an observer subscribes to them. Each subscriber to a cold observable gets its own independent stream of data. Subscribers don’t share the data.

Example of cold observables:

import { Observable } from 'rxjs';

// Creating a cold observable that emits values 1 to 3
const coldObservable = new Observable(observer => {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
});

// Subscribers get their own independent stream
coldObservable.subscribe(value => console.log(`Subscriber 1: ${value}`));
coldObservable.subscribe(value => console.log(`Subscriber 2: ${value}`));

In this example, each subscriber to the coldObservable receives its own set of values (1, 2, 3) independently.

Benefits of Cold Observables:

1. Independence: Each subscriber to a cold observable gets its own independent stream of data. This can be useful when you want to isolate the processing of data for different subscribers.¹
2. Replay: You can “replay” a cold observable by subscribing to it again. This is helpful when you want to start receiving data from the beginning for each new subscriber.
3. Caching: Cold observables can be cached to ensure that expensive data source operations, like HTTP requests, are not repeated for each new subscription.

Exploring Hot Observables

Hot observables, on the other hand, produce data regardless of whether there are subscribers. When you subscribe to a hot observable, you receive data from the point of subscription onward. Subscribers share the same stream of data.

Example of cold observables:

import { fromEvent } from 'rxjs';

// Creating a hot observable from a mouse click event
const hotObservable = fromEvent(document, 'click');

// Subscribers share the same stream of mouse click events
hotObservable.subscribe(event => console.log(`Subscriber 1: Clicked at (${event.clientX}, ${event.clientY})`));
hotObservable.subscribe(event => console.log(`Subscriber 2: Clicked at (${event.clientX}, ${event.clientY})`));

this example, both subscribers to the hotObservable receive the same mouse click events, and they share the same stream of data.

Benefits of Hot Observables:

1. Shared Data: Hot observables allow multiple subscribers to share the same stream of data. This is useful when you want to broadcast events or data to multiple parts of your application.
2. Real-time Data: Hot observables are suitable for scenarios where you need real-time data, such as WebSocket streams or sensor data, and you want all subscribers to see the same data in real-time.
3. Connect and Disconnect: Hot observables can be started independently of subscriptions, and they can continue to produce data even when there are no subscribers. Subscribers can connect and disconnect at any time without affecting the data source.

In summary, the choice between hot and cold observables should be based on the specific requirements of your application. Cold observables are suitable when you need independence and the ability to replay data. Hot observables are useful when you want to share data and support real-time scenarios. It’s not about one being universally better than the other but about using the right tool for the job.