Advanced RxJS Features for Reactive Programming

If you’re already comfortable with the basics of RxJS — Observable, map, filter, subscribe — it’s time to level up. RxJS is incredibly powerful for asynchronous workflows and reactive UIs, and once you start digging into its advanced features, you’ll wonder how you lived without them.

Here’s a breakdown of advanced RxJS features that will make your reactive code cleaner, smarter, and more maintainable.

1. Higher-order Observables: `switchMap`, `mergeMap`, `concatMap`, `exhaustMap`

When an observable emits another observable (e.g., API calls triggered by user input), higher-order mapping operators help control how those inner streams behave.

`switchMap`

Cancels the previous observable if a new one comes in. Perfect for type-ahead search.

tsCopyEditsearchInput$.pipe(
  debounceTime(300),
  switchMap(query => fetchResults(query))
).subscribe();

`mergeMap`

Runs all inner observables in parallel (good for non-cancelable side effects).

tsCopyEditclicks$.pipe(
  mergeMap(() => saveAnalyticsEvent())
).subscribe();

`concatMap`

Queues inner observables and runs them one at a time in order.

tsCopyEdittasks$.pipe(
  concatMap(task => runTask(task))
).subscribe();

`exhaustMap`

Ignores new emissions while the inner observable is running. Great for form submissions.

tsCopyEditsubmit$.pipe(
  exhaustMap(data => sendToServer(data))
).subscribe();

2. Subjects vs. BehaviorSubjects vs. ReplaySubjects

Subjects are like a bridge between imperative and reactive code.

Subject: Multicast stream, emits to all subscribers.
BehaviorSubject: Like Subject, but holds the latest value (great for state).
ReplaySubject: Replays past values to new subscribers (configurable buffer).

tsCopyEditconst state$ = new BehaviorSubject(initialValue);
state$.next(newValue); // All subscribers get the latest

3. Error Handling: `catchError`, `retry`, `retryWhen`

RxJS provides powerful error control that lets your stream recover or retry without crashing the whole flow.

tsCopyEdithttp$.pipe(
  retry(3), // Retry 3 times
  catchError(err => of(fallbackValue)) // Graceful fallback
).subscribe();

4. Timing Operators: `debounceTime`, `throttleTime`, `delay`, `auditTime`

Control when emissions happen, great for rate-limiting or user experience.

debounceTime: Wait until no new value has come in for X ms.
throttleTime: Emit at most once every X ms.
auditTime: Emit the last value during a window of X ms.

tsCopyEditclicks$.pipe(
  throttleTime(1000)
).subscribe(() => console.log("Clicked!"));

5. `combineLatest`, `withLatestFrom`, `forkJoin`, `zip`

Work with multiple streams together.

combineLatest: Emits when any source emits.
withLatestFrom: Pairs the current stream with the latest from another.
forkJoin: Waits for all observables to complete.
zip: Pairs emissions by index.

tsCopyEditcombineLatest([user$, posts$]).subscribe(([user, posts]) => {
  // both values are ready
});

6. Custom Operators (using `pipe` and `map`)

You can create your own operator to encapsulate reusable logic:

tsCopyEditfunction doubleAndLog() {
  return source$ => source$.pipe(
    map(x => x * 2),
    tap(x => console.log('Doubled:', x))
  );
}

of(2, 4, 6).pipe(doubleAndLog()).subscribe();