Aujourd’hui nous allons parler d’une mauvaise pratique que l’on retrouve dans pas mal un projet angular l’absence d’unsubscribe dans les composants.
C’est quoi un subscribe?
C’est quoi un subscribe? Avant de rentrer dans le vif du sujet, nous allons expliquer pourquoi il faut s’occuper proprement de ses subscribes dans une application basée sur RXJS (peu importe le framework).
On peut voir un subscribe comme un abonnement à quelque chose et donc, si nous ne stoppons pas cet abonnement à un moment donné nous continuons à recevoir les informations même si nous ne sommes plus sur la page qui fournit cet abonnement.
Pour illustrer mes propos, si, sur une page de tableau de bord, nous effectuons des requêtes sur une DB toute les 5 secondes pour actualiser des données, si nous quittons la page sans se désabonner de ces requêtes, elle continue à s’exécuter tant que l’application ne sera pas terminée. Ce qui veut dire que lorsque nous revenons sur notre tableau de bord, possiblement, nous nous réabonnons au service et donc doublons les appels, ce qui, à terme, réduit grandement les performances de l’application.
Les subscribtions à la rescousse
La solution consiste à se désabonner de l’ensemble des abonnements lors de la destruction du composant. pour ce faire nous allons utiliser les souscriptions de RXJS pour gérer nos abonnements.
Dans notre composant angular nous allons initialiser une propriété privée que nous appellerons sub. Cette propriété sera de type souscription.
private sub: Subscription = new Subscription();
Nous allons donc pouvoir utiliser notre nouvelle souscription pour centraliser la gestion de nos abonnements comme ceci.
this.sub.add(this.service().subscribe());
Et pour se désabonner, rien de plus simple, le composant doit implémenter l’interface ngOnDestroy, qui permet d’exécuter du code lors de la destruction de celui-ci.
ngOnDestroy(){
this.sub.unsubscrib();
}
cette simple méthode permet de se désabonner de l’ensemble de subscribe de notre composant.
Comme vous avez pu le lire dans cet article, unsubscribe les observables est une chose très importante et il ne faut surtout pas négliger de le faire ou les performances de votre app pourraient en partir.