Unsubscribe, un jeu d’enfant avec takeUntilDestroyed

Avoir un moyen d'unsubscribe à une observable facilement ça vous dis ?

En effet, tout développeur Angular c’est un jour trouvé confronté à répéter du code pour unsubscribe à des observables qui ont été subscribes manuellement (c’est-à-dire sans utiliser le pipe async fourni par Angular qui s’occupe d’unsubscribe automatiquement à notre place).

Et oui, qui dit observable dit subscribe et qui dit subscribe dit unsubscribe ! Tout oubli d'unsubscribe implique une fuite de mémoire et les pertes de performance qui vont avec.

Unsubscribe peut vite devenir un processus répétitif qui va réduire la lisibilité de notre code. Mais ça c’était avant !

Depuis Angular v16 l'opérateur takeUntilDestroyed va nous permettre de nous simplifier la vie.

Pour l’utiliser, c’est simple, tu l’importes depuis @angular/core/rxjs-interop et tu le chaines à une observable. Par exemple :

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({ ... })
export class ExempleComponent {

  constructor() {
    interval(1000).pipe(takeUntilDestroyed()).subscribe(console.log);
  }
}

L'opérateur takeUntilDestroyed est conçu pour être utilisé à l'intérieur d'un contexte d'injection. C’est pourquoi il est utilisé dans le constructeur de ExempleComponent

Si tu souhaites utiliser l'opérateur en dehors d’un contexte d’injection, tu dois lui passer explicitement le fournisseur DestroyRef. Voici un exemple :

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({
  ...
})
export class ExempleComponent implements OnInit {
  private destroyRef = inject(DestroyRef);

  ngOnInit() {
    interval(1000).pipe(
      takeUntilDestroyed(this.destroyRef)
    ).subscribe(console.log);
  }
}

En conclusions, on a vu que l’opérateur takeUntilDestroyed nous permet de complete automatiquement et simplement un observable lorsque le contexte d'appel est détruit. Cela contribue donc à éviter les fuites de mémoire et améliore l’expérience de dev en apportant un code plus lisible.

Merci d'être ici 😇 n'oublier pas de liker, commenter ou partager ça m'aide à continuer de poster du contenu 👨🏻‍💻