📚 Understanding RxJS: Cold and Hot Observables

In RxJS, observables are cold by default, meaning that each subscription to an observable creates an independent execution of the observable's logic. This is why you see the map operator's logic being executed for each subscription. Each subscriber gets its own independent stream of emissions from the source observable.

Cold Observables

A cold observable is one where the data producer (the logic inside the observable) is created anew for each subscriber. This means that if you subscribe to a cold observable multiple times, each subscription will re-execute the observable's logic independently.

Example of Cold Observable

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

const source$ = of(1).pipe(
  map(value => {
    console.log('map called');
    return value * 2;
  })
);

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

Output

map called
Subscriber 1: 2
map called
Subscriber 2: 2

In this example, the map operator's logic is executed twice, once for each subscription.

Hot Observables

A hot observable, on the other hand, shares a single execution of the observable's logic among all subscribers. Using operators like share, shareReplay, or publish can convert a cold observable into a hot observable.

Example of Hot Observable with shareReplay

import { of } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';

const source$ = of(1).pipe(
  map(value => {
    console.log('map called');
    return value * 2;
  }),
  shareReplay(1) // Shares the last emitted value with all subscribers
);

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

Output

map called
Subscriber 1: 2
Subscriber 2: 2

In this example, the map operator's logic is executed only once, and the result is shared among all subscribers.