RxJS (ReactiveX)

RxJS is the JavaScript library of ReactiveX, an API for composing asynchronous and event-based code from observables. Clicks, keystrokes, timers, HTTP responses and WebSocket messages all become streams of values over time that you filter, transform and combine with operators.

Paradigm: Reactive and Dataflow Programming

What Makes RxJS (ReactiveX) Special

  • Everything is a stream. An Observable emits zero or more values, then either completes or fails. A click, an array, a timer and an HTTP call all share this one interface.
  • Operators. map, filter, debounceTime, switchMap, merge and combineLatest build pipelines with .pipe(...), like array methods for time.
  • Lazy and cancellable. Nothing happens until subscribe(), and the subscription can be cancelled, which stops work and frees resources.
  • Handles the hard async cases. Debouncing, cancelling stale requests, retries and combining sources are single operators instead of hand-written state machines.
  • The same model everywhere. ReactiveX exists for Java (RxJava), C# (Rx.NET), Swift, Kotlin and more, and Angular uses RxJS in its core.

Example: Search as you type

import { fromEvent, map, debounceTime, distinctUntilChanged, switchMap } from 'rxjs';
import { ajax } from 'rxjs/ajax';

const input = document.querySelector('#search');

fromEvent(input, 'input')
  .pipe(
    map(event => event.target.value.trim()),
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(q => ajax.getJSON(`/api/search?q=${encodeURIComponent(q)}`))
  )
  .subscribe(results => render(results));

How It Works

  • fromEvent turns the input's input events into a stream. Each keystroke emits a value.
  • debounceTime(300) waits until the user pauses for 300 ms, and distinctUntilChanged() ignores repeated identical queries.
  • switchMap starts a request for each new query and cancels the previous one, so a slow old answer can never overwrite a newer one.
  • Doing this by hand needs timers, flags and cleanup code. Here it is one readable pipeline, and subscribe is the only place with side effects.

History and Where It Is Used

RxJS is used in Angular (HTTP, forms, router), in real-time dashboards and in complex UI event handling. Other libraries offer alternatives such as Signals, async iterators and Effect. Studying the operator vocabulary transfers to every ReactiveX implementation. See the JavaScript roadmap for language basics.

Learn More