LiveLoveApp logo
ServicesArchitecture ReviewWorkshopsCase StudiesBlogContact

Unsubscribing

Unsubscribing

As we've seen, Observables can have teardown logic:

const timer$ = new Observable((observer) => {
  const id = setTimeout(() => {
    observer.next();
    observer.complete();
  }, 300);

  return () => clearTimeout(id);
});

Calling Subscription#unsubscribe() before an observable completes or errors will trigger the teardown logic:

const subscription = timer$.subscribe();

subscription.unsubscribe();

Composite Subscriptions

Unsubscribing from a composite subscription will trigger the teardown logic of all subscribed observables:

const subscription = new Subscription();

subscription.add(shortTimer$.subscribe());
subscription.add(longTimer$.subscribe());

subscription.unsubscribe();

Frameworks: Angular

In Angular, it is a best practice to create a single Subscription object for your component and then unsubscribe in the ngOnDestroy() lifecycle hook:

@Component({...})
export class MyComponent {
  subscription = new Subscription();

  ngOnInit() {
    this.subscription.add(timer$.subscribe());
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Frameworks: React

In React, it is a best practice to set up subscriptions with the useEffect hook:

export function MyComponent() {
  useEffect(() => {
    const subscription = timer$.subscribe();

    return () => subscription.unsubscribe();
  });
}