RxJS — Reactive Programming Library for JavaScript

What it is

RxJS is the reactive extensions library for JavaScript. It implements the Observable pattern, letting you treat click events, HTTP responses, WebSocket messages, and timers as composable data streams. With 100+ operators for transforming, filtering, combining, and error-handling, RxJS is the standard approach to complex async logic in frontend and backend JavaScript.

RxJS is the reactive foundation of Angular. It also powers many standalone applications where event ordering, debouncing, retries, or concurrent request management would be painful with raw Promises or callbacks.

Why it saves time or tokens

Without RxJS, managing concurrent HTTP calls, user input debouncing, and WebSocket reconnection requires scattered state variables and nested callbacks. RxJS replaces that mess with a pipeline of operators that reads top-to-bottom. When asking an AI assistant to generate async logic, specifying RxJS operators produces shorter, more predictable output than describing the same behavior imperatively.

How to use

1. Install the library: npm install rxjs
2. Import the operators you need: import { fromEvent, debounceTime, switchMap } from 'rxjs'
3. Build an observable pipeline and subscribe to it

Example

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

const search$ = fromEvent(input, 'input').pipe(
  debounceTime(300),
  map(e => (e.target as HTMLInputElement).value),
  switchMap(query => fetch('/api/search?q=' + query).then(r => r.json()))
);

search$.subscribe(results => renderResults(results));

This pipeline debounces user keystrokes by 300ms, extracts the input value, cancels any in-flight request when a new keystroke arrives (switchMap), and renders results.

Related on TokRepo

• AI tools for coding — more developer libraries and frameworks curated on TokRepo
• Automation tools — tools that help automate repetitive development tasks

Common pitfalls

• Forgetting to unsubscribe causes memory leaks; use takeUntil, take, or Angular's async pipe
• Nesting subscribes inside subscribes defeats the purpose; flatten with switchMap, mergeMap, or concatMap
• Choosing the wrong flattening operator (mergeMap vs switchMap vs concatMap) leads to race conditions or dropped requests