Esas\u0131nda bu y\u00f6ntemi yukar\u0131daki sat\u0131rlarda referans etti\u011fim i\u00e7eri\u011fimizde unsubscribe Fonksiyonunun Kullan\u0131m\u0131<\/strong> ba\u015fl\u0131\u011f\u0131 alt\u0131nda incelemi\u015f bulunmaktay\u0131z. Evet, subscribe olunan bir Observable<\/code> nesnesine OnDestroy<\/code> lifecycle’\u0131nda a\u015fa\u011f\u0131daki gibi unsubscribe<\/em> metoduyla m\u00fcdahale edebilir ve b\u00f6ylece component destroy edilirken mevcut olan t\u00fcm subscribe’lar\u0131 keserek, memory leaks durumlar\u0131n\u0131n \u00f6n\u00fcne orta \u015feker ge\u00e7ebiliriz.<\/p>\n

\n\r\n@Component({\r\n selector: 'app-root',\r\n standalone: true,\r\n template: ``\r\n})\r\nexport class AppComponent implements OnInit, OnDestroy {\r\n httpClient: HttpClient = inject(HttpClient);\r\n\r\n subscription: Subscription;\r\n ngOnInit(): void {\r\n this.subscription = this.httpClient.get("https:\/\/jsonplaceholder.typicode.com\/posts")\r\n .subscribe(data => console.log(data));\r\n }\r\n\r\n ngOnDestroy(): void {\r\n if (this.subscription)\r\n this.subscription.unsubscribe();\r\n }\r\n}\r\n<\/pre>\n<\/div>\nOrta \u015feker diyorum \u00e7\u00fcnk\u00fc subscribe’lar\u0131n kesilebilmesi i\u00e7in component’in destroy edilmesini beklememiz gerekmektedir. Halbuki kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan component’in destroy edilmesi belki \u00e7ok zaman sonra ger\u00e7ekle\u015ftirilebilir.<\/p>\n Ayr\u0131ca ilgili i\u00e7eri\u011fe g\u00f6z atarsan\u0131z e\u011fer birden fazla subscribe’a da OnDestroy<\/code> lifecycle’\u0131nda nas\u0131l m\u00fcdahale edilece\u011fini ele ald\u0131\u011f\u0131m\u0131z\u0131 g\u00f6receksiniz. Gidip, incelemenizi tavsiye ederim.<\/p>\n takeUntil Kullan\u0131m\u0131<\/h4>\nBu strateji ise takeUntil<\/code> RxJS operat\u00f6r\u00fc ile birlikte bir Subject<\/code> kullan\u0131larak Observable<\/code>‘lar\u0131 y\u00f6netmemizi sa\u011flamaktad\u0131r.<\/p>\n \n\r\n@Component({\r\n selector: 'app-root',\r\n standalone: true,\r\n template: ``\r\n})\r\nexport class AppComponent implements OnInit, OnDestroy {\r\n httpClient: HttpClient = inject(HttpClient);\r\n\r\n destroy$ = new Subject<void>();\r\n ngOnInit(): void {\r\n this.httpClient.get("https:\/\/jsonplaceholder.typicode.com\/posts")\r\n .pipe(takeUntil(this.destroy$))\r\n .subscribe(data => console.log(data));\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.destroy$.next();\r\n this.destroy$.complete();\r\n }\r\n}\r\n<\/pre>\n<\/div>\nBuradaki temel ama\u00e7 t\u00fcm subscribe’lar\u0131 manuel olarak unsubscribe<\/em> yapmak yerine takeUntil<\/code> ile Subject<\/code>‘ten sinyal verildi\u011fi an iptal edebilecek \u015fekilde tasarlamakt\u0131r. OnDestroy<\/code> yakla\u015f\u0131m\u0131na nazaran olduk\u00e7a efektiftir.<\/p>\n takeUntilDestroyed Kullan\u0131m\u0131<\/h4>\nVe son olarak subscribe’lar\u0131 daha az kod yazarak y\u00f6netmemizi ve kesmemizi sa\u011flayacak olan Angular 16 ile gelen takeUntilDestroyed<\/code> RxJS operat\u00f6r\u00fcn\u00fc inceleyece\u011fiz. Bu operat\u00f6r, takeUntil<\/code>‘da oldu\u011fu gibi manuel olarak Subject<\/code> ve OnDestroy<\/code> kullanma ihtiyac\u0131n\u0131 tamamen ortadan kald\u0131rmakta, Angular component’lerine dair ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc takip ederek abonelikleri component yok edildi\u011finde otomatik olarak iptal etmektedir.<\/p>\n \n\r\n@Component({\r\n selector: 'app-root',\r\n standalone: true,\r\n template: ``\r\n})\r\nexport class AppComponent implements OnInit {\r\n httpClient: HttpClient = inject(HttpClient);\r\n\r\n ngOnInit(): void {\r\n this.httpClient.get("https:\/\/jsonplaceholder.typicode.com\/posts")\r\n .pipe(takeUntilDestroyed())\r\n .subscribe(data => console.log(data));\r\n }\r\n}\r\n<\/pre>\n<\/div>\nDi\u011ferlerine nazaran Angular ya\u015fam d\u00f6ng\u00fcs\u00fcne entegre bir \u015fekilde i\u015fleyen ve olduk\u00e7a \u00e7a\u011fda\u015f y\u00f6ntemdir diyebiliriz.<\/p>\n \u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle… \nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere… \n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":" Merhaba, Bu i\u00e7eri\u011fimizde, Angular mimarisinde bundan y\u0131llar \u00f6nce de klavyeye alarak kritize etti\u011fimiz(bknz: Angular \u2013 Subscribe Durumlar\u0131nda Memory Leaks Y\u00f6netimi \u0130le Bellek Optimizasyonu) bir bellek optimizasyonu durumuna kar\u015f\u0131n g\u00fcncel \u00e7\u00f6z\u00fcmlerle bak\u0131\u015f at\u0131yor olaca\u011f\u0131z. Kastetti\u011fimiz...<\/p>\n","protected":false},"author":1,"featured_media":26698,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420],"tags":[2156,5197,5195,5196],"class_list":["post-27419","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-angular-takeuntildestroyed","tag-ngondestroy","tag-takeuntildestroyed"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27419","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=27419"}],"version-history":[{"count":5,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27419\/revisions"}],"predecessor-version":[{"id":27427,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/27419\/revisions\/27427"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/26698"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=27419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=27419"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=27419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}