Angular & Rxjs: Отписываться или не отписываться?

Как вы наверное уже знаете при подписке на обозреваемую последовательность либо просто событие в Javascript вы обычно должны в определенный момент отписываться, чтобы освободить память. Иначе это приведет к утечке памяти.

Мы рассмотрим основные случаи, когда вы должны отписываться в ngOnDestroy хуке компонента, а также случаи, когда можно не отписываться.

Нужно отписываться

Формы

необходимо отписываться от формы и от отдельных формконтролов, на которые подписались:

Роутер

Согласно официальной документации Angular должен сам отписывать вас, но этого не происходит, поэтому:

Рендерер

Бесконечные обозреваемые последовательности

Примерами бесконечных могут служить последовательности созданные с помощью interva() или слушающие события (fromEvent()):

ngRx

От подписок на состояние Store ngRx тоже необходимо отписываться:

 

Отписываться НЕ нужно

Async pipe

C async pipe нам повезло и он выполнят работу под отписке за нас:

@HostListener

так же нам не нужно отписываться, когда мы навешиваем слушатель события с помощью HostListener:

Конечные обозреваемые последовательности

Бывают последовательности, которые сами завершаются, такие как HTTP и timer:

Bonus

Также вы можете использовать оператор takeUntil, который позволит писать код в декларативном стиле, не отписываясь от каждого обозревателя отдельно:

Кроме takeUntil вы еще можете использовать taketakeWhile и first которые также позволят “убить” последовательность, соотвественно не прийдется от нее отписываться.

 

Большая часть материала взята из статьи When to Unsubscribe in Angular.