{"id":324,"date":"2023-01-16T05:00:00","date_gmt":"2023-01-16T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=324"},"modified":"2024-10-21T12:37:57","modified_gmt":"2024-10-21T19:37:57","slug":"how-to-avoid-memory-leaks-with-rxjs-observables","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-avoid-memory-leaks-with-rxjs-observables\/","title":{"rendered":"How to avoid memory leaks with RxJs observables?"},"content":{"rendered":"\n

The easiest way to get in trouble in a big Angular application is to create a memory leak by not unsubscribing from your observables<\/a>. While there are different techniques <\/a>to unsubscribe your observables automatically, one is more concise, elegant, and overall the most error-proof.<\/p>\n\n\n\n

That technique is to use the async<\/code> pipe<\/a> from the Angular framework.<\/p>\n\n\n\n

Why is the async<\/code> pipe such a great tool?<\/strong><\/p>\n\n\n\n

    \n
  1. First, it automatically subscribes to the observable, so we no longer need to call .subscribe()<\/code>.<\/li>\n\n\n\n
  2. It returns the data from that observable, triggering Angular’s change detection when needed for our component to display the latest data.<\/li>\n\n\n\n
  3. Finally, it automatically unsubscribes from the observable when our component is destroyed.<\/li>\n<\/ol>\n\n\n\n

    All of that with just 6 characters! (ok, perhaps a bit more if you want to count the whitespace):<\/p>\n\n\n

    <div<\/span>><\/span>{{myObservable | async}}<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    The async<\/code> pipe works exactly like the code we would write (and thus duplicate over and over again, making our code base larger and thus our code slower) if we didn’t use it. <\/p>\n\n\n\n
    There isn’t any good reason not to use the async pipe, and if you think you have some, stay tuned for our next messages, as we’ll cover some nice tips and tricks around using that pipe.<\/p>\n","protected":false},"excerpt":{"rendered":"
    The easiest way to get in trouble in a big Angular application is to create a memory leak by not unsubscribing from your observables. While there are different techniques to unsubscribe your observables automatically, one is more concise, elegant, and overall the most error-proof. That technique is to use the async pipe from the Angular […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,10],"tags":[],"class_list":["post-324","post","type-post","status-publish","format-standard","hentry","category-pipes","category-rxjs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=324"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/324\/revisions"}],"predecessor-version":[{"id":2202,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/324\/revisions\/2202"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
    Check its source code here<\/a>, and you’ll see that all it does is implement ngOnDestroy<\/code> to unsubscribe from our observable.<\/p>\n\n\n\n