4. Teardown and unsubscribe

Why you need to unsubscribe

Not every stream ends on its own. of(1, 2, 3) finishes in an instant, but interval(1000) will tick forever. Event handlers are the same: until you remove the listener, it keeps running.

In Angular this matters even more: a component leaves the screen, but if its subscription is still alive, the work carries on in the background. That's a memory leak. So RxJS gives us a way to cleanly "switch a stream off."

Glossary

• Subscription — the object that .subscribe() returns. It has an .unsubscribe() method.
• unsubscribe() — the command "switch this stream off for me." After you call it, no more values arrive.
• Teardown — the cleanup function. It's the function the Observable's recipe returns, and RxJS calls it when the subscription ends (via unsubscribe, complete, or error). This is where you typically stop timers, close sockets, and remove handlers.

What a teardown function looks like

new Observable(subscriber => {
  // here — the startup work
  return () => {
    // here — the cleanup
  };
});

const { Observable } = Rx;

const stream$ = new Observable(subscriber => {
  console.log('Subscribed');
  subscriber.next('tick');

  return () => {
    console.log('Teardown');
  };
});

const sub = stream$.subscribe(value => {
  console.log('Value: ' + value);
});

sub.unsubscribe();