Modern web uygulamalar\u0131 geli\u015ftirmek, asenkron veri ak\u0131\u015flar\u0131n\u0131 ve kullan\u0131c\u0131 etkile\u015fimlerini verimli bir \u015fekilde y\u00f6netmeyi gerektirir. Angular ba\u015fta olmak \u00fczere bir\u00e7ok modern JavaScript ekosisteminde, bu asenkron s\u00fcre\u00e7leri y\u00f6netmek i\u00e7in RxJS (Reactive Extensions for JavaScript) k\u00fct\u00fcphanesi yayg\u0131n olarak kullan\u0131l\u0131r. RxJS, reaktif programlama felsefesini benimseyerek karma\u015f\u0131k veri ak\u0131\u015flar\u0131n\u0131 y\u00f6netilebilir hale getirir. Ancak, reaktif programlaman\u0131n getirdi\u011fi b\u00fcy\u00fck g\u00fc\u00e7, beraberinde \u00f6nemli bir sorumluluk da getirir: Aboneliklerin (Subscriptions) do\u011fru y\u00f6netilmesi.<\/p>\n
Bir Observable ak\u0131\u015f\u0131na abone (subscribe) oldu\u011fumuzda, bu ak\u0131\u015f t\u00fcketilmeyi bekleyen s\u00fcrekli bir veri kayna\u011f\u0131 haline gelir. E\u011fer bu abonelikleri i\u015fimiz bitti\u011finde sonland\u0131rmazsak, uygulaman\u0131n arka plan\u0131nda \u00e7al\u0131\u015fmaya devam ederler. Bu durum, “Bellek S\u0131z\u0131nt\u0131s\u0131” (Memory Leak) olarak adland\u0131r\u0131lan ve uygulaman\u0131n performans\u0131n\u0131 zamanla d\u00fc\u015f\u00fcren, hatta taray\u0131c\u0131n\u0131n \u00e7\u00f6kmesine neden olabilen ciddi sorunlara yol a\u00e7ar. Bu makalede, RxJS aboneliklerini y\u00f6netmenin en temiz, en g\u00fcvenli ve deklaratif yolu olan JavaScript motorlar\u0131 (\u00f6rne\u011fin Google Chrome’un V8 motoru), art\u0131k ihtiya\u00e7 duyulmayan bellek alanlar\u0131n\u0131 temizlemek i\u00e7in “Garbage Collector” (\u00c7\u00f6p Toplay\u0131c\u0131) mekanizmas\u0131n\u0131 kullan\u0131r. Garbage Collector, bellekteki bir nesneye eri\u015filebilecek aktif bir referans kalmad\u0131\u011f\u0131nda o nesneyi bellekten siler.<\/p>\n Ancak, bir Angular bile\u015feni (component) i\u00e7inde global bir servise veya s\u00fcrekli veri \u00fcreten bir Observable ak\u0131\u015f\u0131na (\u00f6rne\u011fin Abonelikleri sonland\u0131rman\u0131n en temel yolu, her abonelikten d\u00f6nen A\u015fa\u011f\u0131daki \u00f6rnekte, manuel abonelik y\u00f6netiminin nas\u0131l yap\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6rebiliriz:<\/p>\n Bu y\u00f6ntem k\u00fc\u00e7\u00fck bile\u015fenlerde i\u015fe yarasa da, ger\u00e7ek d\u00fcnya senaryolar\u0131nda h\u0131zl\u0131ca s\u00fcrd\u00fcr\u00fclemez hale gelir. Birden fazla aboneli\u011finiz oldu\u011funda, her biri i\u00e7in ayr\u0131 de\u011fi\u015fkenler tan\u0131mlaman\u0131z, bunlar\u0131 bir dizide toplaman\u0131z veya Deklaratif (Tan\u0131mlay\u0131c\u0131) programlama, “nas\u0131l yap\u0131laca\u011f\u0131n\u0131” de\u011fil, “ne yap\u0131laca\u011f\u0131n\u0131” tan\u0131mlamaya odaklan\u0131r. RxJS’in sundu\u011fu Bu yakla\u015f\u0131m sayesinde, aboneli\u011fin ne zaman sonlanaca\u011f\u0131n\u0131 do\u011frudan ak\u0131\u015f\u0131n (pipe) i\u00e7inde tan\u0131mlar\u0131z. B\u00f6ylece bile\u015fenin ya\u015fam d\u00f6ng\u00fcs\u00fc ile veri ak\u0131\u015f\u0131n\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fc deklaratif bir \u015fekilde birbirine ba\u011flam\u0131\u015f oluruz.<\/p>\n \u015eimdi bu ad\u0131mlar\u0131 kod \u00fczerinde uygulayal\u0131m:<\/p>\n Bu kodda neler oldu\u011funu ad\u0131m ad\u0131m inceleyelim:<\/p>\n \u0130lk olarak, \u0130kinci ad\u0131mda, Son olarak, Angular bile\u015feni ekran d\u0131\u015f\u0131na \u00e7\u0131kt\u0131\u011f\u0131nda ve yok edildi\u011finde RxJS kullan\u0131rken yap\u0131lan en yayg\u0131n hatalardan biri, Alt\u0131n Kural:<\/strong> Genel bir kural olarak, Bunun nedenini anlamak i\u00e7in a\u015fa\u011f\u0131daki \u00f6rne\u011fi inceleyelim:<\/p>\n Yukar\u0131daki yanl\u0131\u015f kullan\u0131mda, Do\u011fru kullan\u0131m ise \u015fu \u015fekildedir:<\/p>\n Angular ekibi, reaktif programlamay\u0131 daha da kolayla\u015ft\u0131rmak amac\u0131yla Angular 16 s\u00fcr\u00fcm\u00fcyle birlikte yeni bir yard\u0131mc\u0131 operat\u00f6r tan\u0131tt\u0131: E\u011fer Uygulaman\u0131zda hangi abonelik y\u00f6netim stratejisini se\u00e7ece\u011finiz, kulland\u0131\u011f\u0131n\u0131z Angular s\u00fcr\u00fcm\u00fcne ve \u00f6zel ihtiya\u00e7lar\u0131n\u0131za ba\u011fl\u0131d\u0131r. A\u015fa\u011f\u0131daki kar\u015f\u0131la\u015ft\u0131rma tablosu karar vermenize yard\u0131mc\u0131 olabilir:<\/p>\n E\u011fer bir Angular servisi Bazen geli\u015ftiriciler hem TypeScript taraf\u0131nda RxJS, asenkron d\u00fcnyay\u0131 y\u00f6netmek i\u00e7in harika bir ara\u00e7 setidir, ancak bellek y\u00f6netimi konusunda geli\u015ftiriciye sorumluluk y\u00fckler. E\u011fer Angular 16 veya daha yeni bir s\u00fcr\u00fcm kullan\u0131yorsan\u0131z, takeUntil<\/code> operat\u00f6r\u00fcn\u00fc derinlemesine inceleyece\u011fiz.<\/p>\nBellek S\u0131z\u0131nt\u0131s\u0131 (Memory Leak) Nedir ve Neden Olu\u015fur?<\/h3>\n
Interval<\/code>, fromEvent<\/code> veya bir Store se\u00e7ici) abone oldu\u011fumuzda, bu abonelik bile\u015fenin kendisinden ba\u011f\u0131ms\u0131z bir ya\u015fam d\u00f6ng\u00fcs\u00fcne sahip olur. Bile\u015fen yok edildi\u011finde (kullan\u0131c\u0131 ba\u015fka bir sayfaya ge\u00e7ti\u011finde), e\u011fer abonelik aktif kalmaya devam ederse, abonelik i\u00e7indeki geri \u00e7a\u011f\u0131r\u0131m fonksiyonu (callback) hala bile\u015fenin \u00f6zelliklerine (this<\/code> ba\u011flam\u0131na) referans veriyor olacakt\u0131r. Garbage Collector, bu referans nedeniyle bile\u015fenin bellekte kaplad\u0131\u011f\u0131 alan\u0131 temizleyemez. Kullan\u0131c\u0131 sayfaya her geri d\u00f6nd\u00fc\u011f\u00fcnde yeni bir abonelik olu\u015fturulur ve eski abonelikler de arka planda \u00e7al\u0131\u015fmaya devam eder. Bu durum belle\u011fin \u015fi\u015fmesine ve uygulaman\u0131n yava\u015flamas\u0131na neden olur.<\/p>\n\u0130mperatif Yakla\u015f\u0131m: Manuel Abonelik Y\u00f6netimi<\/h3>\n
Subscription<\/code> nesnesini saklamak ve bile\u015fen yok edilirken bu nesne \u00fczerinde unsubscribe()<\/code> metodunu \u00e7a\u011f\u0131rmakt\u0131r. Bu yakla\u015f\u0131ma “\u0130mperatif” (Emredici) yakla\u015f\u0131m denir, \u00e7\u00fcnk\u00fc bilgisayara her ad\u0131m\u0131 tek tek ne zaman ve nas\u0131l yapaca\u011f\u0131n\u0131 s\u00f6yleriz.<\/p>\n\nimport { Component, OnInit, OnDestroy } from '@angular\/core';\nimport { interval, Subscription } from 'rxjs';\n\n@Component({\n selector: 'app-manual-subscription',\n template: '<p>Saya\u00e7: {{ counter }}<\/p>'\n})\nexport class ManualSubscriptionComponent implements OnInit, OnDestroy {\n counter = 0;\n private mySubscription: Subscription | null = null;\n\n ngOnInit() {\n this.mySubscription = interval(1000).subscribe(value => {\n this.counter = value;\n console.log('Saya\u00e7 \u00e7al\u0131\u015f\u0131yor:', value);\n });\n }\n\n ngOnDestroy() {\n if (this.mySubscription) {\n this.mySubscription.unsubscribe();\n console.log('Abonelik manuel olarak sonland\u0131r\u0131ld\u0131.');\n }\n }\n}\n<\/code><\/pre>\nSubscription<\/code> s\u0131n\u0131f\u0131n\u0131n add()<\/code> metodunu kullanarak birle\u015ftirmeniz gerekir. Bu durum, kod taban\u0131n\u0131zda \u00e7ok fazla “boilerplate” (\u015fablon\/gereksiz) kod olu\u015fmas\u0131na yol a\u00e7ar. Ayr\u0131ca, geli\u015ftiricinin ngOnDestroy<\/code> i\u00e7inde bir aboneli\u011fi iptal etmeyi unutmas\u0131 \u00e7ok kolayd\u0131r.<\/p>\nDeklaratif Yakla\u015f\u0131m: takeUntil Operat\u00f6r\u00fc<\/h3>\n
takeUntil<\/code> operat\u00f6r\u00fc, abonelik y\u00f6netimini deklaratif hale getirmek i\u00e7in m\u00fckemmel bir ara\u00e7t\u0131r.<\/p>\ntakeUntil<\/code>, kaynak Observable ak\u0131\u015f\u0131n\u0131 dinler ve kendisine parametre olarak verilen ikinci bir “tetikleyici” (notifier) Observable veri yayana (emit) kadar bu ak\u0131\u015f\u0131 a\u00e7\u0131k tutar. Tetikleyici Observable bir de\u011fer yayd\u0131\u011f\u0131 anda, takeUntil<\/code> kaynak Observable ak\u0131\u015f\u0131n\u0131 otomatik olarak tamamlar (complete) ve aboneli\u011fi sonland\u0131r\u0131r.<\/p>\ntakeUntil ile Abonelik Y\u00f6netimi Nas\u0131l Yap\u0131l\u0131r?<\/h3>\n
takeUntil<\/code> operat\u00f6r\u00fcn\u00fc Angular bile\u015fenlerinde kullan\u0131rken standart bir tasar\u0131m kal\u0131b\u0131 (pattern) uygulan\u0131r. Bu kal\u0131p \u00fc\u00e7 temel ad\u0131mdan olu\u015fur:<\/p>\n\n
destroy$<\/code> ad\u0131nda \u00f6zel bir Subject<void><\/code> tan\u0131mlan\u0131r.<\/li>\npipe<\/code> fonksiyonu i\u00e7ine takeUntil(this.destroy$)<\/code> eklenir.<\/li>\nngOnDestroy<\/code>), destroy$<\/code> Subject’i \u00fczerinden veri yay\u0131l\u0131r ve tamamlan\u0131r.<\/li>\n<\/ul>\n\nimport { Component, OnInit, OnDestroy } from '@angular\/core';\nimport { interval, Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs\/operators';\n\n@Component({\n selector: 'app-declarative-subscription',\n template: '<p>Saya\u00e7: {{ counter }}<\/p>'\n})\nexport class DeclarativeSubscriptionComponent implements OnInit, OnDestroy {\n counter = 0;\n \/\/ 1. Tetikleyici Subject tan\u0131mlan\u0131yor\n private destroy$ = new Subject<void>();\n\n ngOnInit() {\n interval(1000)\n .pipe(\n \/\/ 2. takeUntil operat\u00f6r\u00fc ak\u0131\u015fa ekleniyor\n takeUntil(this.destroy$)\n )\n .subscribe({\n next: (value) => {\n this.counter = value;\n console.log('Deklaratif saya\u00e7:', value);\n },\n complete: () => {\n console.log('Ak\u0131\u015f ba\u015far\u0131yla tamamland\u0131.');\n }\n });\n }\n\n ngOnDestroy() {\n \/\/ 3. Bile\u015fen yok edilirken tetikleyici \u00e7al\u0131\u015ft\u0131r\u0131l\u0131yor\n this.destroy$.next();\n this.destroy$.complete();\n }\n}\n<\/code><\/pre>\ndestroy$<\/code> ad\u0131nda bir RxJS Subject<\/code> olu\u015fturduk. Subject’ler hem bir Observable hem de bir Observer gibi davranabilirler, yani hem veri yayabilirler hem de dinlenebilirler. T\u00fcr\u00fcn\u00fc void<\/code> olarak belirledik \u00e7\u00fcnk\u00fc yayaca\u011f\u0131 de\u011ferin kendisiyle de\u011fil, sadece yay\u0131lma an\u0131 (event) ile ilgileniyoruz.<\/p>\ninterval(1000)<\/code> ak\u0131\u015f\u0131na pipe<\/code> kullanarak takeUntil(this.destroy$)<\/code> operat\u00f6r\u00fcn\u00fc uygulad\u0131k. Bu, RxJS’e \u015fu talimat\u0131 verir: “Bana her saniye bir say\u0131 g\u00f6nder, ta ki destroy$<\/code> nesnesi bir de\u011fer yayana kadar. O an geldi\u011finde bu ak\u0131\u015f\u0131 kapat.”<\/p>\nngOnDestroy<\/code> metodu otomatik olarak tetiklenir. Burada this.destroy$.next()<\/code> diyerek tetikleyiciyi ate\u015fleriz. Bu sinyal takeUntil<\/code> operat\u00f6r\u00fcne ula\u015f\u0131r, operat\u00f6r kaynak ak\u0131\u015f\u0131 kapat\u0131r ve abonelik g\u00fcvenli bir \u015fekilde sonland\u0131r\u0131l\u0131r. Hemen ard\u0131ndan this.destroy$.complete()<\/code> \u00e7a\u011fr\u0131s\u0131 yaparak tetikleyicinin kendisini de bellekten temizleriz.<\/p>\nOperat\u00f6rlerin S\u0131ralamas\u0131 Neden \u00d6nemlidir?<\/h3>\n
takeUntil<\/code> operat\u00f6r\u00fcn\u00fc pipe<\/code> zinciri i\u00e7inde yanl\u0131\u015f yere konumland\u0131rmakt\u0131r. RxJS operat\u00f6rleri yukar\u0131dan a\u015fa\u011f\u0131ya (veya soldan sa\u011fa) s\u0131rayla \u00e7al\u0131\u015ft\u0131r\u0131r. Bu nedenle, takeUntil<\/code> operat\u00f6r\u00fcn\u00fcn zincirdeki konumu davran\u0131\u015f\u0131n\u0131 do\u011frudan etkiler.<\/p>\ntakeUntil<\/code> operat\u00f6r\u00fc her zaman pipe<\/code> zincirindeki en son<\/strong> operat\u00f6r olmal\u0131d\u0131r.<\/p>\n\n\/\/ YANLI\u015e KULLANIM\nsource$.pipe(\n takeUntil(this.destroy$),\n switchMap(data => this.http.get(\/api\/data\/${data}<\/code>))\n).subscribe();\n<\/code><\/pre>\ntakeUntil<\/code> operat\u00f6r\u00fc switchMap<\/code>‘ten \u00f6nce yer almaktad\u0131r. E\u011fer destroy$<\/code> sinyal g\u00f6nderirse, source$<\/code> ak\u0131\u015f\u0131 sonlan\u0131r. Ancak, e\u011fer switchMap<\/code> i\u00e7indeki HTTP iste\u011fi o s\u0131rada hala devam ediyorsa, bu i\u00e7 ak\u0131\u015f (inner observable) tamamlanmayabilir ve bellek s\u0131z\u0131nt\u0131s\u0131na yol a\u00e7abilir. \u00c7\u00fcnk\u00fc takeUntil<\/code> sadece kendisinden \u00f6nceki ak\u0131\u015f\u0131 kontrol edebilir, kendisinden sonra \u00fcretilen i\u00e7 ak\u0131\u015flar\u0131 do\u011frudan sonland\u0131ramaz.<\/p>\n\n\/\/ DO\u011eRU KULLANIM\nsource$.pipe(\n switchMap(data => this.http.get(\/api\/data\/${data}<\/code>)),\n takeUntil(this.destroy$) \/\/ En sonda yer almal\u0131\n).subscribe();\n<\/code><\/pre>\ntakeUntil<\/code> en sonda yer ald\u0131\u011f\u0131nda, zincirdeki t\u00fcm operat\u00f6rlerin (ve onlar\u0131n \u00fcretti\u011fi i\u00e7 ak\u0131\u015flar\u0131n) \u00e7\u0131kt\u0131s\u0131n\u0131 izler ve tetiklendi\u011fi anda t\u00fcm sistemi tek seferde g\u00fcvenli bir \u015fekilde kapat\u0131r.<\/p>\nModern Angular Alternatifi: takeUntilDestroyed<\/h3>\n
takeUntilDestroyed<\/code>. Bu operat\u00f6r, yukar\u0131da bahsetti\u011fimiz Subject<\/code> olu\u015fturma ve ngOnDestroy<\/code> i\u00e7inde manuel tetikleme i\u015flemlerini arka planda otomatik olarak ger\u00e7ekle\u015ftirir.<\/p>\ntakeUntilDestroyed<\/code>, Angular’\u0131n yeni DestroyRef<\/code> mekanizmas\u0131n\u0131 kullan\u0131r. Bu sayede bile\u015fenin yok edilme an\u0131n\u0131 kendisi takip eder. Kullan\u0131m\u0131 son derece temizdir:<\/p>\n\nimport { Component, OnInit } from '@angular\/core';\nimport { interval } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular\/core\/rxjs-interop';\n\n@Component({\n selector: 'app-modern-subscription',\n template: '<p>Modern Saya\u00e7: {{ counter }}<\/p>'\n})\nexport class ModernSubscriptionComponent implements OnInit {\n counter = 0;\n\n constructor() {\n \/\/ Constructor i\u00e7inde kullan\u0131ld\u0131\u011f\u0131nda ekstra parametreye gerek yoktur\n interval(1000)\n .pipe(takeUntilDestroyed())\n .subscribe(value => this.counter = value);\n }\n\n ngOnInit() {}\n}\n<\/code><\/pre>\ntakeUntilDestroyed<\/code> operat\u00f6r\u00fcn\u00fc constructor d\u0131\u015f\u0131nda (\u00f6rne\u011fin ngOnInit<\/code> veya ba\u015fka bir metot i\u00e7inde) kullanmak isterseniz, Angular’\u0131n enjeksiyon ba\u011flam\u0131na (injection context) eri\u015fmesi gerekir. Bu durumda DestroyRef<\/code> referans\u0131n\u0131 operat\u00f6re manuel olarak ge\u00e7meniz gerekir:<\/p>\n\nimport { Component, OnInit, inject, DestroyRef } from '@angular\/core';\nimport { interval } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular\/core\/rxjs-interop';\n\n@Component({\n selector: 'app-modern-init-subscription',\n template: '<p>Saya\u00e7: {{ counter }}<\/p>'\n})\nexport class ModernInitSubscriptionComponent implements OnInit {\n counter = 0;\n private destroyRef = inject(DestroyRef); \/\/ DestroyRef enjekte ediliyor\n\n ngOnInit() {\n interval(1000)\n .pipe(\n \/\/ Enjeksiyon ba\u011flam\u0131 d\u0131\u015f\u0131nda oldu\u011fu i\u00e7in destroyRef parametre olarak ge\u00e7iliyor\n takeUntilDestroyed(this.destroyRef)\n )\n .subscribe(value => this.counter = value);\n }\n}\n<\/code><\/pre>\nHangi Y\u00f6ntemi Se\u00e7melisiniz?<\/h3>\n
\n\n
\n \nY\u00f6ntem<\/th>\n Avantajlar\u0131<\/th>\n Dezavantajlar\u0131<\/th>\n En Uygun Kullan\u0131m Senaryosu<\/th>\n<\/tr>\n<\/thead>\n \n Manuel unsubscribe()<\/strong><\/td>\n Ekstra RxJS operat\u00f6r\u00fc gerektirmez, anla\u015f\u0131lmas\u0131 basittir.<\/td>\n \u00c7ok fazla boilerplate kod \u00fcretir, hata yapmaya (unutulmaya) \u00e7ok m\u00fcsaittir.<\/td>\n Yaln\u0131zca tek bir aboneli\u011fin oldu\u011fu \u00e7ok basit ve k\u00fc\u00e7\u00fck bile\u015fenler.<\/td>\n<\/tr>\n \n takeUntil Operat\u00f6r\u00fc<\/strong><\/td>\n Deklaratiftir, t\u00fcm abonelikleri tek bir Subject ile y\u00f6netir, g\u00fcvenlidir.<\/td>\n Bile\u015fene OnDestroy eklenmesini ve Subject tan\u0131mlanmas\u0131n\u0131 gerektirir.<\/td>\n Angular 15 ve alt\u0131 s\u00fcr\u00fcmler ile Angular d\u0131\u015f\u0131 saf RxJS projeleri.<\/td>\n<\/tr>\n \n takeUntilDestroyed<\/strong><\/td>\n S\u0131f\u0131r boilerplate kod, en modern ve temiz yakla\u015f\u0131md\u0131r. Arka plan\u0131 otomatik y\u00f6netir.<\/td>\n Angular 16+ gerektirir. Constructor d\u0131\u015f\u0131nda DestroyRef ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 vard\u0131r.<\/td>\n Angular 16 ve \u00fczeri s\u00fcr\u00fcmlerdeki t\u00fcm yeni bile\u015fenler ve servisler.<\/td>\n<\/tr>\n \n Async Pipe (| async)<\/strong><\/td>\n Manuel abonelik gerektirmez, \u015fablon (template) d\u00fczeyinde otomatik temizlik sa\u011flar.<\/td>\n Sadece HTML \u015fablonu i\u00e7inde kullan\u0131labilir, TypeScript kod bloklar\u0131nda do\u011frudan eri\u015fim sa\u011flamaz.<\/td>\n Verinin sadece HTML \u015fablonunda g\u00f6sterilece\u011fi durumlar (En ideal y\u00f6ntemdir).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n S\u0131k Yap\u0131lan Hatalar ve Dikkat Edilmesi Gerekenler<\/h3>\n
takeUntil<\/code> g\u00fc\u00e7l\u00fc bir operat\u00f6rd\u00fcr, ancak yanl\u0131\u015f kullan\u0131ld\u0131\u011f\u0131nda beklenmedik hatalara veya yine bellek s\u0131z\u0131nt\u0131lar\u0131na yol a\u00e7abilir. \u0130\u015fte ka\u00e7\u0131nman\u0131z gereken baz\u0131 yayg\u0131n hatalar:<\/p>\n1. Subject’i “complete” Etmeyi Unutmak<\/h4>\n
ngOnDestroy<\/code> i\u00e7inde this.destroy$.next()<\/code> \u00e7a\u011f\u0131rmak ak\u0131\u015flar\u0131 sonland\u0131r\u0131r, ancak destroy$<\/code> Subject’inin kendisi hala bellekte a\u00e7\u0131k kal\u0131r. E\u011fer bu Subject’i kapatmazsan\u0131z, \u00e7ok k\u00fc\u00e7\u00fck de olsa bir bellek s\u0131z\u0131nt\u0131s\u0131 riski devam eder. Bu y\u00fczden her zaman complete()<\/code> metodunu da \u00e7a\u011f\u0131rmal\u0131s\u0131n\u0131z:<\/p>\n\nngOnDestroy() {\n this.destroy$.next();\n this.destroy$.complete(); \/\/ Bunu asla unutmay\u0131n!\n}\n<\/code><\/pre>\n2. Singleton Servislerde takeUntil Kullan\u0131m\u0131<\/h4>\n
providedIn: 'root'<\/code> olarak tan\u0131mlanm\u0131\u015fsa, bu servis bir “Singleton” d\u0131r. Yani uygulaman\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca sadece bir kez olu\u015fturulur ve asla yok edilmez. Bu t\u00fcr servislerde takeUntil(this.destroy$)<\/code> kullanmak anlams\u0131zd\u0131r, \u00e7\u00fcnk\u00fc servisin ngOnDestroy<\/code> metodu uygulama kapat\u0131lana kadar asla tetiklenmez. Servislerde abonelik olu\u015ftururken iki kez d\u00fc\u015f\u00fcnmeli ve m\u00fcmk\u00fcnse abonelik yerine do\u011frudan Observable ak\u0131\u015flar\u0131n\u0131 bile\u015fenlere aktarmal\u0131s\u0131n\u0131z.<\/p>\n3. Birden Fazla Kez Abone Olmak (Over-subscribing)<\/h4>\n
subscribe<\/code> kullan\u0131r hem de ayn\u0131 Observable’\u0131 HTML taraf\u0131nda async<\/code> pipe ile dinlerler. Bu durum gereksiz yere iki farkl\u0131 abonelik olu\u015fturulmas\u0131na ve API isteklerinin iki kez at\u0131lmas\u0131na yol a\u00e7ar. E\u011fer veriyi sadece ekranda g\u00f6sterecekseniz, TypeScript taraf\u0131nda abone olmay\u0131n; sadece async<\/code> pipe kullan\u0131n.<\/p>\nSonu\u00e7<\/h3>\n
takeUntil<\/code> operat\u00f6r\u00fc, bu sorumlulu\u011fu yerine getirmenin en zarif, deklaratif ve g\u00fcvenli yollar\u0131ndan biridir. Kodunuzu imperatif temizlik i\u015flemlerinden ar\u0131nd\u0131rarak daha okunabilir, bak\u0131m\u0131 kolay ve performansl\u0131 hale getirir.<\/p>\ntakeUntilDestroyed<\/code> operat\u00f6r\u00fc ile bu s\u00fcreci daha da k\u0131saltabilirsiniz. Ancak arka plandaki \u00e7al\u0131\u015fma mant\u0131\u011f\u0131n\u0131 kavramak ad\u0131na takeUntil<\/code> operat\u00f6r\u00fcn\u00fcn \u00e7al\u0131\u015fma prensiplerini bilmek her reaktif programlama uzman\u0131 i\u00e7in kritik \u00f6neme sahiptir. Projelerinizde deklaratif abonelik y\u00f6netimini benimseyerek, bellek s\u0131z\u0131nt\u0131s\u0131 endi\u015fesi olmadan g\u00fcvenli ve ak\u0131c\u0131 uygulamalar geli\u015ftirebilirsiniz.<\/p>\n