Cold vs Hot Observables in RxJS Explained

Dimitar Gaydardzhiev — Wed, 04 Mar 2026 15:53:00 +0000

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

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

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.

Why RxJS Makes Asynchronous JavaScript Easier

Dimitar Gaydardzhiev — Wed, 04 Mar 2026 15:33:44 +0000

Handling asynchronous code in JavaScript can become messy quickly. Nested callbacks, chained promises, and complex async workflows often make code difficult to maintain.

Whether you're dealing with API calls, user events, or real-time data streams, managing asynchronous data efficiently is critical.

In plain JavaScript, asynchronous logic is typically handled using:

callbacks
promises
async/await

While these approaches work well for many situations, they have limitations, especially when working with multiple values over time. This is where RxJS and observables provide a powerful alternative.

Using Callbacks

Callbacks were one of the earliest ways to handle asynchronous operations in JavaScript. A typical example might look like this:

apiCall(function (response) {
    processResponse(response, function (processedData) {
        writeFile(processedData, function () {
            console.log('File written successfully');
        });
    });
});

In this example, we first make an API call, process the returned data with a callback, and then write it to a file using another callback. While this works, the code can quickly become difficult to read, especially as more nested logic is introduced. This is often referred to as callback hell.

Using Promises

Promises improved asynchronous code significantly by providing a more readable interface compared to callbacks. Example:

apiCall()
    .then(response => processResponse(response))
    .then(processedData => writeFile(processedData))
    .then(() => console.log('File written successfully'))
    .catch(error => console.error('Error occurred:', error))
    .finally(() => console.log('Operation complete'));

With promises, we can chain the then(), catch(), and finally() methods to handle the API response and subsequent actions. This is easier to read than nested callbacks, but it’s important to note that promises only handle a single value. Once the promise is resolved and the value is passed through the chain, the operation is done. This makes promises less suitable for scenarios where multiple values are produced over time.

Using Async/Await

The async/await syntax makes asynchronous code look very similar to synchronous code:

async function handleData() {
    try {
        const response = await apiCall();
        const processedData = await processResponse(response);
        await writeFile(processedData);
        console.log('File written successfully');
    } catch (error) {
        console.error('Error occurred:', error);
    } finally {
        console.log('Operation complete');
    }
}

handleData();

However, under the hood, async/await still relies on promises, which means it shares the same limitation - it works with a single resolved value.

Using RxJS and Observables

RxJS introduces the concept of observables, which allow us to work with streams of values over time rather than a single result.

const observable = apiCall$();

const observer = {
  next: (value: any) => console.log('Received value:', value),
  error: (error: Error) => console.error('Error occurred:', error),
  complete: () => console.log('All values processed'),
};

observable.subscribe(observer);

In this code, we call a function that returns an observable. We then subscribe to this observable by passing an observer with three methods:

next() - called whenever a new value is produced
error() - called if there’s an error during the data flow
complete() - called when there are no more values to process

The key advantage of using RxJS is that an observable can emit multiple values over time, calling the next() method each time a new value is available. This makes it ideal for working with streams of data, such as user input events or real-time server responses.

Final Thoughts

Callbacks, promises, and async/await are all useful tools in JavaScript. However, when dealing with multiple asynchronous values over time, observables provide a far more flexible and powerful model. They allow developers to think in terms of data streams instead of individual events, which leads to cleaner and more maintainable asynchronous code.