В чем разница между Observable Hot и Cold

«В чем разница между Observable Hot и Cold» — вопрос из категории Асинхронность, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Cold Observable начинает выполнение только при подписке (subscribe). Каждый подписчик получает независимый поток данных. Пример: HTTP-запросы.

import { Observable } from 'rxjs';

const cold$ = new Observable(observer => {
  console.log('Cold: HTTP request');
  observer.next(Math.random());
});

cold$.subscribe(console.log); // Запускает запрос
cold$.subscribe(console.log); // Запускает ещё один запрос

Hot Observable уже выполняется независимо от подписок. Подписчики получают данные, начиная с момента подписки. Пример: события DOM.

import { fromEvent } from 'rxjs';

const hot$ = fromEvent(document, 'click');

hot$.subscribe(console.log); // Ловит клики с момента подписки
setTimeout(() => {
  hot$.subscribe(console.log); // Ловит клики только после этой подписки
}, 5000);

Разница: Cold — ленивый и независимый для каждого подписчика, Hot — активный и общий для всех. Можно сделать Hot из Cold с помощью share() или publish().