Отписка в Angular
Этот пост некий итог моего поиска оптимального решения по отписке в Angular.
Существование некоторых компонентов нам необходимо только на определенных страницах. При уходе со страницы происходит их удаление.
Если в них есть подписки, то при дестрое компонента от них стоит отписываться для освобождения памяти.
Angular делает это автоматически при использовании async pipe.
Так что там, где данные просто необходимо вывести, стоит перейти на async pipe.
В интернете можно найти много топиков на тему в каких случаях необходимо отписываться.
Например, в случае обычного http запроса ангуляр вроде как отписывается, но при этом только если запрос завершился.
Если юзер до завершения запроса ушел со страницы, то отписки не произойдет. Но стоит ли из-за этого волноваться?
Разве что внутри подписки сработает код, который приведет к ошибке.
Проверить утечку памяти можно в Chrome, вкладка Memory. Но мне она не очень помогла.
Возможно у нас не настолько сложное приложение, чтобы словить реально большую утечку.
В результате на данный момент не вижу необходимости отписываться от обычных http запросов.
Разве что тех, что долго проходят, так как юзер может успеть уйти со страницы.
Но есть же и множество других не http подписок. Вариантов отписаться множество.
Для более красивого и читаемого кода можно использовать декоратор (это решение взято из пакета ngx-take-until-destroy). На самом деле если вас не парит количество пакетов, от которых вы зависите, то можно просто использовать этот пакет. Я же создала в проекте свой декоратор.
Пример:
В компоненте:
Минус этого подхода в том, что в компоненте обязательно должен присутствовать хук:
ngOnDestroy() { }
Притом, что он может быть пустым.
Только ли утечка?
Полезнее проверки на утечку памяти оказалась проверка, что происходит при изменении данных на которые мы подписываемся.
Допустим на различных страницах сайта мы подписаны на данные юзера.
Если при дестрое компонентов не отписаться, то при выходе из профиля будет выполнен весь код, которые находится в подписках.
Или возьмем слайдер в новостях — для перелистывания мы там используем interval.
Если не отписываться, то даже если мы уйдем со страницы новостей, функция перелистывания будет работать. А нам оно не надо 🙂