\n React uygulamalar\u0131 geli\u015ftirirken, bile\u015fenlerimizin ne zaman olu\u015fturuldu\u011funu, g\u00fcncellendi\u011fini veya kald\u0131r\u0131ld\u0131\u011f\u0131n\u0131 bilmek, performans\u0131 optimize etmek ve beklenmedik hatalar\u0131 \u00f6nlemek i\u00e7in hayati \u00f6neme sahiptir. Peki, bir React bile\u015feni sahne arkas\u0131nda tam olarak nas\u0131l bir “ya\u015fam” s\u00fcrer? Bu makalede, React bile\u015fenlerinin ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131n\u0131, neden bu kadar \u00f6nemli olduklar\u0131n\u0131 ve modern React geli\u015ftirme d\u00fcnyas\u0131nda bu kavramlar\u0131n nas\u0131l evrildi\u011fini etkile\u015fimli bir diyagram e\u015fli\u011finde (d\u00fc\u015f\u00fcnsel olarak) ad\u0131m ad\u0131m inceleyece\u011fiz.\n <\/p>\n
\n React bile\u015fen ya\u015fam d\u00f6ng\u00fcs\u00fc (component lifecycle), bir bile\u015fenin var oldu\u011fu s\u00fcre boyunca ge\u00e7ti\u011fi farkl\u0131 a\u015famalar\u0131 ifade eder. T\u0131pk\u0131 bir insan ya\u015fam\u0131 gibi, bir React bile\u015feni de do\u011far (olu\u015fur), ya\u015far (g\u00fcncellenir) ve \u00f6l\u00fcr (ayr\u0131l\u0131r). Bu a\u015famalar\u0131n her birinde, React bize belirli anlarda \u00e7al\u0131\u015facak \u00f6zel metotlar veya fonksiyonlar sunar. Bu metotlara “ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131” denir ve bunlar sayesinde bile\u015fenlerimizin davran\u0131\u015flar\u0131n\u0131, render s\u00fcre\u00e7lerini ve yan etkilerini (side effects) hassas bir \u015fekilde kontrol edebiliriz. Bu kontrol mekanizmas\u0131, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda performans optimizasyonu, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nleme ve kaynak y\u00f6netimi a\u00e7\u0131s\u0131ndan kritik bir rol oynar.\n <\/p>\n
\n Ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131n\u0131 anlamak, sadece kod yazmakla kalmay\u0131p ayn\u0131 zamanda uygulaman\u0131z\u0131n derinlemesine nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 kavraman\u0131za yard\u0131mc\u0131 olur. \u00d6rne\u011fin, bir API’den veri \u00e7ekme i\u015flemini do\u011fru ya\u015fam d\u00f6ng\u00fcs\u00fc metodunda ger\u00e7ekle\u015ftirmek, gereksiz a\u011f isteklerini \u00f6nler ve kullan\u0131c\u0131 deneyimini iyile\u015ftirir. Ayn\u0131 \u015fekilde, bir bile\u015fen ekrandan kald\u0131r\u0131l\u0131rken (unmount) temizlik i\u015flemlerini yapmamak, uygulaman\u0131zda bellek s\u0131z\u0131nt\u0131lar\u0131na yol a\u00e7abilir ve zamanla performans d\u00fc\u015f\u00fc\u015f\u00fcne neden olabilir. Bu nedenle, React geli\u015ftiricileri i\u00e7in ya\u015fam d\u00f6ng\u00fcs\u00fc kavramlar\u0131na hakim olmak, sadece iyi bir pratik de\u011fil, ayn\u0131 zamanda daha sa\u011flam, verimli ve hata toleransl\u0131 uygulamalar in\u015fa etmenin temelidir. Ge\u00e7mi\u015fte s\u0131n\u0131f bile\u015fenleri (class components) \u00fczerinden y\u00f6netilen bu s\u00fcre\u00e7, React Hooks’un (kancalar) ortaya \u00e7\u0131kmas\u0131yla fonksiyonel bile\u015fenlerde de \u00e7ok daha sezgisel ve g\u00fc\u00e7l\u00fc bir \u015fekilde ele al\u0131nabilir hale gelmi\u015ftir.\n <\/p>\n
\n Bu makale boyunca, hem geleneksel s\u0131n\u0131f bile\u015fenlerindeki ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131n\u0131 hem de modern React’in fonksiyonel bile\u015fenler ve Hooks ile bu kavramlar\u0131 nas\u0131l yeniden tan\u0131mlad\u0131\u011f\u0131n\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Bu sayede, hangi yakla\u015f\u0131m\u0131 kullan\u0131rsan\u0131z kullan\u0131n, bile\u015fenlerinizin \u00f6mr\u00fcn\u00fc tam olarak anlayacak ve kontrol edebileceksiniz.\n <\/p>\n
\n React, ilk \u00e7\u0131kt\u0131\u011f\u0131 y\u0131llardan itibaren s\u0131n\u0131f bile\u015fenleri ile ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131n\u0131 y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc bir yap\u0131 sunmu\u015ftur. Her ne kadar g\u00fcn\u00fcm\u00fczde fonksiyonel bile\u015fenler ve Hooks daha pop\u00fcler olsa da, s\u0131n\u0131f bile\u015fenlerini anlamak, React’in temel felsefesini kavramak ve eski projelerde \u00e7al\u0131\u015fabilmek i\u00e7in hala b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. S\u0131n\u0131f bile\u015fenlerinin ya\u015fam d\u00f6ng\u00fcs\u00fc, temel olarak \u00fc\u00e7 ana faza ayr\u0131l\u0131r: Olu\u015fum (Mounting), G\u00fcncelleme (Updating) ve Ayr\u0131lma (Unmounting). Her faz, bile\u015fenin belirli bir durumunda tetiklenen \u00f6zel metotlar i\u00e7erir. Bu metotlar sayesinde geli\u015ftiriciler, bile\u015fenin render edilmeden \u00f6nce, render edildikten sonra veya g\u00fcncellendikten sonra belirli eylemleri ger\u00e7ekle\u015ftirebilirler.\n <\/p>\n
\n Olu\u015fum a\u015famas\u0131, bir bile\u015fenin ilk kez DOM’a eklenmesiyle ilgilidir. Bu a\u015famada bile\u015fenin ilk durumu (initial state) olu\u015fturulur ve bile\u015fen ekranda g\u00f6r\u00fcn\u00fcr hale gelir. G\u00fcncelleme a\u015famas\u0131 ise, bile\u015fenin \n Bir React bile\u015feni ilk kez DOM’a eklenirken, yani “mount” edilirken belirli bir s\u0131rayla bir dizi ya\u015fam d\u00f6ng\u00fcs\u00fc metodu tetiklenir. Bu a\u015fama, bile\u015fenin ilk kurulumunu ve ba\u015flang\u0131\u00e7 durumunu belirlemek i\u00e7in kullan\u0131l\u0131r. \u0130\u015fte bu a\u015famadaki \u00f6nemli metotlar ve g\u00f6revleri:\n <\/p>\n \n Vaka Analizi: \u0130lk Veri \u00c7ekme<\/strong> \n Bu s\u0131ralama, bir bile\u015fenin ilk kez ekranda belirmesi i\u00e7in temel ad\u0131mlar\u0131 olu\u015fturur. Her ad\u0131m\u0131n belirli bir amac\u0131 vard\u0131r ve bu s\u0131ray\u0131 bilmek, beklenmedik davran\u0131\u015flar\u0131 ve performans sorunlar\u0131n\u0131 \u00e7\u00f6zmede size yol g\u00f6sterecektir.\n <\/p>\n \n Bir bile\u015fenin \n Vaka Analizi: Gereksiz Render’lar\u0131 \u00d6nleme<\/strong> \n React’in \n Vaka Analizi: Kullan\u0131c\u0131 Giri\u015fiyle Dinamik \u0130\u00e7erik G\u00fcncelleme<\/strong> \n G\u00fcncelleme a\u015famas\u0131, React bile\u015fenlerinin dinamik do\u011fas\u0131n\u0131n kalbinde yer al\u0131r. Bu metotlar\u0131 do\u011fru bir \u015fekilde kullanmak, uygulaman\u0131z\u0131n hem tepkiselli\u011fini hem de verimlili\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir.\n <\/p>\n \n Bir bile\u015fenin \u00f6mr\u00fcn\u00fcn son a\u015famas\u0131, DOM'dan kald\u0131r\u0131lmas\u0131d\u0131r, yani \"unmount\" edilmesidir. Bu a\u015famada, bile\u015fenin kullanmakta oldu\u011fu kaynaklar\u0131 serbest b\u0131rakmak ve potansiyel bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 (memory leaks) \u00f6nlemek i\u00e7in temizlik i\u015flemleri yapmak b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Bu fazda yaln\u0131zca bir ana ya\u015fam d\u00f6ng\u00fcs\u00fc metodu bulunur:\n <\/p>\n \n \u0130\u015fte \n Vaka Analizi: Sohbet Uygulamas\u0131nda Ba\u011flant\u0131 Kesme<\/strong> \n \n React Hooks'un 16.8 s\u00fcr\u00fcm\u00fcyle birlikte tan\u0131t\u0131lmas\u0131, React bile\u015fenlerinin yaz\u0131lma ve ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fcn y\u00f6netilme \u015feklini k\u00f6kten de\u011fi\u015ftirmi\u015ftir. Art\u0131k s\u0131n\u0131f bile\u015fenlerine ihtiya\u00e7 duymadan, fonksiyonel bile\u015fenler i\u00e7inde \n \n \n Hooks ile ya\u015fam d\u00f6ng\u00fcs\u00fc y\u00f6netimi, kodu daha i\u015flevsel, anla\u015f\u0131l\u0131r ve test edilebilir hale getirmi\u015ftir. Art\u0131k ilgili mant\u0131k par\u00e7alar\u0131n\u0131 (\u00f6rne\u011fin, veri \u00e7ekme ve temizleme) tek bir \n React bile\u015fen ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131n\u0131 anlamak, soyut kavramlar i\u00e7erdi\u011fi i\u00e7in bazen zorlay\u0131c\u0131 olabilir. \u0130\u015fte bu noktada etkile\u015fimli bir diyagram\u0131n g\u00fcc\u00fc devreye girer. G\u00f6rsel ve etkile\u015fimli bir diyagram, bir bile\u015fenin \u00f6mr\u00fc boyunca hangi metodun ne zaman ve hangi ko\u015fullarda tetiklendi\u011fini \u00e7ok daha net bir \u015fekilde anlamam\u0131z\u0131 sa\u011flar. \u00d6rne\u011fin, bu diyagramda \"Mounting\" faz\u0131na t\u0131klad\u0131\u011f\u0131n\u0131zda, \n Ger\u00e7ek d\u00fcnya senaryolar\u0131nda, bu ya\u015fam d\u00f6ng\u00fcs\u00fc bilgisi paha bi\u00e7ilmezdir. \u0130\u015fte baz\u0131 geli\u015ftirici ipu\u00e7lar\u0131 ve senaryolar:\n <\/p>\n \n Bu ipu\u00e7lar\u0131, React uygulaman\u0131z\u0131n daha kararl\u0131, h\u0131zl\u0131 ve y\u00f6netilebilir olmas\u0131n\u0131 sa\u011flayacakt\u0131r. Ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131na hakim olmak, sadece bir \u00f6zellik de\u011fil, ayn\u0131 zamanda modern React geli\u015ftirmenin temel bir ta\u015f\u0131d\u0131r.\n <\/p>\n \n React bile\u015fen ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131, bir bile\u015fenin do\u011fu\u015fundan \u00f6l\u00fcm\u00fcne kadar olan yolculu\u011funu y\u00f6netmemizi sa\u011flayan g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r. Bu makalede, hem geleneksel s\u0131n\u0131f bile\u015fenlerindeki \n C: S\u0131n\u0131f bile\u015fenlerinde, ilk veri \u00e7ekme i\u00e7in \n C: Her ikisi de performans optimizasyonu i\u00e7in gereksiz yeniden render'lar\u0131 \u00f6nlemeye yarar. \n C: Temizlik fonksiyonu, bile\u015fen DOM'dan kald\u0131r\u0131ld\u0131\u011f\u0131nda (unmount) veya \n C: Bu metotlar, React'in e\u015fzamans\u0131z (asynchronous) renderlama stratejileriyle uyumsuzluk g\u00f6sterdi\u011fi ve yayg\u0131n olarak yanl\u0131\u015f kullan\u0131ma yol a\u00e7t\u0131\u011f\u0131 i\u00e7in kald\u0131r\u0131ld\u0131. \u00d6rne\u011fin, \n C: Bellek s\u0131z\u0131nt\u0131s\u0131, art\u0131k ihtiya\u00e7 duyulmayan veya DOM'dan kald\u0131r\u0131lm\u0131\u015f bir bile\u015fenin bellekte hala referans tutmas\u0131 ve kaynaklar\u0131 serbest b\u0131rakmamas\u0131 durumunda olu\u015fur. \u00d6rne\u011fin, bir props<\/code>‘lar\u0131nda (\u00f6zelliklerinde) veya state<\/code>‘inde (durumunda) bir de\u011fi\u015fiklik oldu\u011funda tetiklenir. Bu, bile\u015fenin ekrandaki g\u00f6r\u00fcn\u00fcm\u00fcn\u00fcn g\u00fcncellenmesini sa\u011flar. Son olarak, ayr\u0131lma a\u015famas\u0131, bir bile\u015fenin DOM’dan kald\u0131r\u0131lmas\u0131yla ger\u00e7ekle\u015fir; bu a\u015famada genellikle kaynaklar\u0131 serbest b\u0131rakma ve bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nleme gibi temizlik i\u015flemleri yap\u0131l\u0131r. Bu \u00fc\u00e7 faz\u0131 ve her birinin i\u00e7erdi\u011fi metotlar\u0131 detayl\u0131 olarak incelemek, s\u0131n\u0131f bile\u015fenlerinin derinlemesine anla\u015f\u0131lmas\u0131n\u0131 sa\u011flayacakt\u0131r.\n <\/p>\nOlu\u015fum (Mounting) A\u015famas\u0131: Bile\u015fenin Hayata Geli\u015fi ve \u0130lk Render<\/h3>\n
\n
constructor(props)<\/code>:<\/strong> Bu, bir s\u0131n\u0131f bile\u015feninin olu\u015fturuldu\u011fu ilk yerdir. Genellikle state<\/code>‘i ba\u015flatmak ve metotlar\u0131 ba\u011flamak (bind) i\u00e7in kullan\u0131l\u0131r. super(props)<\/code> \u00e7a\u011fr\u0131s\u0131, s\u0131n\u0131f bile\u015fenlerinde zorunludur.<\/p>\n\nclass VeriCekici extends React.Component {\n constructor(props) {\n super(props);\n this.state = { veri: null, yukleniyor: true };\n console.log(\"1. Constructor \u00e7al\u0131\u015ft\u0131: Bile\u015fen ba\u015flat\u0131l\u0131yor.\");\n }\n \/\/ ... di\u011fer metotlar\n}\n <\/code><\/pre>\n<\/p><\/div>\n<\/li>\nstatic getDerivedStateFromProps(props, state)<\/code>:<\/strong> Bu metot, render<\/code> metodu \u00e7a\u011fr\u0131lmadan hemen \u00f6nce, hem olu\u015fum hem de g\u00fcncelleme a\u015famas\u0131nda tetiklenir. Amac\u0131, props<\/code>‘taki de\u011fi\u015fikliklere g\u00f6re state<\/code>‘i g\u00fcncellemek i\u00e7in senkronize bir yol sa\u011flamakt\u0131r. Nadiren kullan\u0131l\u0131r ve genellikle state<\/code>‘i props<\/code>‘tan t\u00fcretmeniz gerekti\u011finde tercih edilir. Bir obje d\u00f6nd\u00fcrmeli veya null<\/code> d\u00f6nd\u00fcrmelidir.<\/p>\n\nstatic getDerivedStateFromProps(props, state) {\n console.log(\"2. getDerivedStateFromProps \u00e7al\u0131\u015ft\u0131.\");\n \/\/ \u00d6rne\u011fin, bir prop de\u011fi\u015fti\u011finde state'i s\u0131f\u0131rlayabiliriz.\n if (props.kullaniciId !== state.sonKullaniciId) {\n return {\n veri: null,\n yukleniyor: true,\n sonKullaniciId: props.kullaniciId,\n };\n }\n return null;\n}\n <\/code><\/pre>\n<\/p><\/div>\n<\/li>\nrender()<\/code>:<\/strong> Bu, bile\u015fenin g\u00f6rsel \u00e7\u0131kt\u0131s\u0131n\u0131 d\u00f6nd\u00fcren tek zorunlu metottur. JSX d\u00f6nd\u00fcrmelidir ve yan etkiler (API \u00e7a\u011fr\u0131lar\u0131, DOM manip\u00fclasyonu vb.) i\u00e7ermemelidir. Sadece props<\/code> ve state<\/code>‘e g\u00f6re UI’\u0131 tan\u0131mlar.<\/p>\n\nrender() {\n console.log(\"3. Render \u00e7al\u0131\u015ft\u0131: UI olu\u015fturuluyor.\");\n if (this.state.yukleniyor) {\n return <div>Veriler y\u00fckleniyor...<\/div>;\n }\n return <div>Veri: {this.state.veri}<\/div>;\n}\n <\/code><\/pre>\n<\/p><\/div>\n<\/li>\ncomponentDidMount()<\/code>:<\/strong> Bile\u015fen DOM’a ba\u015far\u0131yla eklendikten sonra yaln\u0131zca bir kez tetiklenir. Bu, yan etkileri ger\u00e7ekle\u015ftirmek i\u00e7in ideal bir yerdir:<\/p>\n\n
\n Bir e-ticaret uygulamas\u0131nda \u00fcr\u00fcn listesini ilk kez y\u00fckl\u00fcyorsan\u0131z, bu API \u00e7a\u011fr\u0131s\u0131n\u0131 componentDidMount<\/code> i\u00e7inde yapmal\u0131s\u0131n\u0131z. B\u00f6ylece bile\u015fen ekrana geldikten sonra veriler \u00e7ekilir ve kullan\u0131c\u0131ya g\u00f6sterilir.\n <\/p>\n\ncomponentDidMount() {\n console.log(\"4. componentDidMount \u00e7al\u0131\u015ft\u0131: Bile\u015fen DOM'da.\");\n \/\/ API'den veri \u00e7ekme \u00f6rne\u011fi\n fetch(https:\/\/api.example.com\/data\/${this.props.kullaniciId}<\/code>)\n .then(response => response.json())\n .then(veri => this.setState({ veri: veri.mesaj, yukleniyor: false }))\n .catch(error => console.error(\"Veri \u00e7ekme hatas\u0131:\", error));\n\n \/\/ \u00d6rnek bir olay dinleyicisi ekleme\n window.addEventListener('resize', this.handleResize);\n}\n <\/code><\/pre>\n<\/p><\/div>\n<\/li>\n<\/ul>\nG\u00fcncelleme (Updating) A\u015famas\u0131: De\u011fi\u015fimlere Dinamik Tepkiler ve Performans Optimizasyonu<\/h3>\n
props<\/code>‘lar\u0131 de\u011fi\u015fti\u011finde veya setState()<\/code> \u00e7a\u011fr\u0131s\u0131 ile state<\/code>‘i g\u00fcncellendi\u011finde, bile\u015fen g\u00fcncelleme a\u015famas\u0131na girer. Bu a\u015fama, bile\u015fenin yeni verilerle nas\u0131l tepki verece\u011fini ve DOM’un nas\u0131l g\u00fcncellenece\u011fini belirler. G\u00fcncelleme a\u015famas\u0131, performans\u0131 optimize etmek i\u00e7in kritik f\u0131rsatlar sunar. \u0130\u015fte bu a\u015famadaki \u00f6nemli metotlar:\n <\/p>\n\n
static getDerivedStateFromProps(props, state)<\/code>:<\/strong> Bu metot, olu\u015fum a\u015famas\u0131nda oldu\u011fu gibi, g\u00fcncelleme a\u015famas\u0131nda da render<\/code> metodundan hemen \u00f6nce tetiklenir. Amac\u0131 ayn\u0131d\u0131r: props<\/code>‘taki de\u011fi\u015fikliklere g\u00f6re state<\/code>‘i senkronize bir \u015fekilde g\u00fcncellemek.\n <\/li>\nshouldComponentUpdate(nextProps, nextState)<\/code>:<\/strong> Bu metot, bir bile\u015fenin g\u00fcncellenip g\u00fcncellenmeyece\u011fine karar vermek i\u00e7in kullan\u0131l\u0131r. Varsay\u0131lan olarak true<\/code> d\u00f6ner ve her zaman g\u00fcncelleme yap\u0131l\u0131r. Ancak, false<\/code> d\u00f6nd\u00fcr\u00fcrseniz, bile\u015fen ve alt bile\u015fenleri yeniden render edilmez. Bu, \u00f6zellikle performans a\u00e7\u0131s\u0131ndan kritik bile\u015fenlerde gereksiz render’lar\u0131 \u00f6nlemek i\u00e7in g\u00fc\u00e7l\u00fc bir optimizasyon arac\u0131d\u0131r.<\/p>\n
\n Bir sohbet uygulamas\u0131nda, her yeni mesaj geldi\u011finde t\u00fcm mesaj listesini yeniden render etmek yerine, sadece de\u011fi\u015fen mesaj\u0131 veya yeni eklenen mesaj\u0131 render etmek isteyebilirsiniz. shouldComponentUpdate<\/code> burada devreye girerek, e\u011fer props<\/code> veya state<\/code> ger\u00e7ekten de\u011fi\u015fmediyse render i\u015flemini atlayabilir.\n <\/p>\n\nshouldComponentUpdate(nextProps, nextState) {\n console.log(\"shouldComponentUpdate \u00e7al\u0131\u015ft\u0131.\");\n \/\/ Sadece 'mesaj' prop'u de\u011fi\u015fti\u011finde g\u00fcncelle\n if (nextProps.mesaj !== this.props.mesaj || nextState.sayac !== this.state.sayac) {\n return true; \/\/ G\u00fcncelle\n }\n return false; \/\/ G\u00fcncelleme\n}\n <\/code><\/pre>\n<\/p><\/div>\nPureComponent<\/code> s\u0131n\u0131f\u0131, shouldComponentUpdate<\/code> metodunu s\u0131\u011f kar\u015f\u0131la\u015ft\u0131rma (shallow comparison) yaparak otomatik olarak uygular.\n <\/p>\n<\/li>\nrender()<\/code>:<\/strong> G\u00fcncelleme a\u015famas\u0131nda da render<\/code> metodu tekrar \u00e7al\u0131\u015f\u0131r ve bile\u015fenin g\u00fcncel props<\/code> ve state<\/code> de\u011ferlerine g\u00f6re yeni bir JSX \u00e7\u0131kt\u0131s\u0131 \u00fcretir. React, bu yeni \u00e7\u0131kt\u0131y\u0131 mevcut DOM ile kar\u015f\u0131la\u015ft\u0131r\u0131r (reconciliation) ve sadece gerekli de\u011fi\u015fiklikleri DOM’a uygular.\n <\/li>\ngetSnapshotBeforeUpdate(prevProps, prevState)<\/code>:<\/strong> Bu metot, render<\/code> \u00e7a\u011fr\u0131ld\u0131ktan ve DOM g\u00fcncellenmeden hemen \u00f6nce tetiklenir. Nadiren kullan\u0131l\u0131r, ancak \u00f6zellikle DOM’dan g\u00fcncellenmeden \u00f6nceki bir anl\u0131k g\u00f6r\u00fcnt\u00fcy\u00fc (snapshot) yakalaman\u0131z gerekti\u011finde faydal\u0131d\u0131r. \u00d6rne\u011fin, bir sohbet penceresinde yeni mesaj geldi\u011finde kayd\u0131rma pozisyonunu korumak i\u00e7in kullan\u0131labilir. Bu metot, d\u00f6nd\u00fcrd\u00fc\u011f\u00fc de\u011feri componentDidUpdate<\/code> metoduna \u00fc\u00e7\u00fcnc\u00fc parametre olarak iletir.<\/p>\n\ngetSnapshotBeforeUpdate(prevProps, prevState) {\n console.log(\"getSnapshotBeforeUpdate \u00e7al\u0131\u015ft\u0131.\");\n \/\/ Sohbet kutusunun kayd\u0131rma pozisyonunu kaydet\n if (prevProps.mesajlar.length < this.props.mesajlar.length) {\n const sohbetKutusu = this.listRef.current;\n return sohbetKutusu.scrollHeight - sohbetKutusu.scrollTop;\n }\n return null;\n}\n <\/code><\/pre>\n<\/p><\/div>\n<\/li>\ncomponentDidUpdate(prevProps, prevState, snapshot)<\/code>:<\/strong> Bile\u015fen DOM'da g\u00fcncellendikten hemen sonra tetiklenir. Bu metot, componentDidMount<\/code> gibi yan etkileri ger\u00e7ekle\u015ftirmek i\u00e7in idealdir, ancak yaln\u0131zca bile\u015fen g\u00fcncellendi\u011finde. Genellikle prevProps<\/code> ve prevState<\/code> ile mevcut props<\/code> ve state<\/code>'i kar\u015f\u0131la\u015ft\u0131rarak ko\u015fullu i\u015flemler yap\u0131l\u0131r.<\/p>\n
\n Bir arama kutusuna yeni bir terim yaz\u0131ld\u0131\u011f\u0131nda, props<\/code> veya state<\/code> g\u00fcncellenir. componentDidUpdate<\/code> i\u00e7inde, yeni arama terimiyle bir API \u00e7a\u011fr\u0131s\u0131 yaparak sonu\u00e7lar\u0131 dinamik olarak g\u00fcncelleyebilirsiniz.\n <\/p>\n\ncomponentDidUpdate(prevProps, prevState, snapshot) {\n console.log(\"componentDidUpdate \u00e7al\u0131\u015ft\u0131.\");\n \/\/ snapshot varsa, kayd\u0131rma pozisyonunu ayarla\n if (snapshot !== null) {\n const sohbetKutusu = this.listRef.current;\n sohbetKutusu.scrollTop = sohbetKutusu.scrollHeight - snapshot;\n }\n\n \/\/ Sadece prop de\u011fi\u015fti\u011finde API \u00e7a\u011fr\u0131s\u0131 yap\n if (this.props.kullaniciId !== prevProps.kullaniciId) {\n this.setState({ yukleniyor: true });\n fetch(https:\/\/api.example.com\/data\/${this.props.kullaniciId}<\/code>)\n .then(response => response.json())\n .then(veri => this.setState({ veri: veri.mesaj, yukleniyor: false }));\n }\n}\n <\/code><\/pre>\n<\/p><\/div>\n<\/li>\n<\/ul>\nAyr\u0131lma (Unmounting) A\u015famas\u0131: Kaynaklar\u0131n Temizlenmesi ve Bellek S\u0131z\u0131nt\u0131lar\u0131n\u0131n \u00d6nlenmesi<\/h3>\n
\n
componentWillUnmount()<\/code>:<\/strong> Bile\u015fen DOM'dan kald\u0131r\u0131lmadan hemen \u00f6nce tetiklenir. Bu metot, bile\u015fenin kullanmakta oldu\u011fu t\u00fcm kaynaklar\u0131 temizlemek i\u00e7in ideal bir yerdir. E\u011fer bu temizlik i\u015flemleri yap\u0131lmazsa, uygulaman\u0131zda performans sorunlar\u0131na ve bellek s\u0131z\u0131nt\u0131lar\u0131na yol a\u00e7abilir.<\/p>\ncomponentWillUnmount<\/code> i\u00e7inde yayg\u0131n olarak yap\u0131lan temizlik i\u015flemleri:\n <\/p>\n\n
componentDidMount<\/code> veya componentDidUpdate<\/code> i\u00e7inde eklenen event listener'lar\u0131 kald\u0131rma.<\/li>\nsetTimeout<\/code> veya setInterval<\/code> ile ba\u015flat\u0131lan timer'lar\u0131 temizleme.<\/li>\n
\n Bir ger\u00e7ek zamanl\u0131 sohbet uygulamas\u0131nda, kullan\u0131c\u0131 bir sohbet odas\u0131ndan ayr\u0131ld\u0131\u011f\u0131nda veya bile\u015fen ekrandan kald\u0131r\u0131ld\u0131\u011f\u0131nda, o sohbet odas\u0131na olan WebSocket ba\u011flant\u0131s\u0131n\u0131 kesmek ve ilgili event listener'lar\u0131 kald\u0131rmak istersiniz. Aksi takdirde, bile\u015fen DOM'da olmasa bile arka planda \u00e7al\u0131\u015fmaya devam edebilir ve gereksiz kaynak t\u00fcketebilir.\n <\/p>\n\nclass SohbetOdasi extends React.Component {\n constructor(props) {\n super(props);\n this.state = { mesajlar: [] };\n this.intervalId = null;\n this.ws = null;\n }\n\n componentDidMount() {\n console.log(\"Sohbet Odas\u0131 Ba\u011fland\u0131.\");\n \/\/ WebSocket ba\u011flant\u0131s\u0131 ba\u015flatma\n this.ws = new WebSocket('ws:\/\/localhost:8080\/chat');\n this.ws.onmessage = (event) => {\n this.setState(prevState => ({\n mesajlar: [...prevState.mesajlar, event.data]\n }));\n };\n \/\/ \u00d6rnek bir timer\n this.intervalId = setInterval(() => {\n console.log(\"Sohbet odas\u0131 aktif.\");\n }, 1000);\n }\n\n componentWillUnmount() {\n console.log(\"Sohbet Odas\u0131 Ayr\u0131l\u0131yor: Temizlik Yap\u0131l\u0131yor.\");\n \/\/ WebSocket ba\u011flant\u0131s\u0131n\u0131 kapatma\n if (this.ws) {\n this.ws.close();\n console.log(\"WebSocket ba\u011flant\u0131s\u0131 kapat\u0131ld\u0131.\");\n }\n \/\/ Timer'\u0131 temizleme\n if (this.intervalId) {\n clearInterval(this.intervalId);\n console.log(\"Timer temizlendi.\");\n }\n \/\/ Eklenen di\u011fer event listener'lar\u0131 kald\u0131rma\n window.removeEventListener('scroll', this.handleScroll); \/\/ varsay\u0131msal\n }\n\n render() {\n return (\n <div>\n <h3>{this.props.odaAdi} Sohbet Odas\u0131<\/h3>\n <ul>\n {this.state.mesajlar.map((mesaj, index) => (\n <li key={index}>{mesaj}<\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n}\n <\/code><\/pre>\n<\/p><\/div>\n<\/li>\n<\/ul>\ncomponentWillUnmount<\/code> metodu, uygulaman\u0131z\u0131n kaynaklar\u0131 verimli kullanmas\u0131n\u0131 ve uzun s\u00fcreli \u00e7al\u0131\u015fmalarda performans\u0131n\u0131 korumas\u0131n\u0131 sa\u011flayan kritik bir ad\u0131md\u0131r. Bu temizlik i\u015flemlerini g\u00f6z ard\u0131 etmek, uygulaman\u0131z\u0131n zamanla yava\u015flamas\u0131na veya \u00e7\u00f6kmesine neden olabilecek gizli sorunlara yol a\u00e7abilir.\n <\/p>\nFonksiyonel Bile\u015fenler ve React Hooks: Modern Ya\u015fam D\u00f6ng\u00fcs\u00fc Y\u00f6netimi<\/h2>\n
state<\/code> (durum) ve di\u011fer React \u00f6zelliklerini kullanabiliyoruz. Ya\u015fam d\u00f6ng\u00fcs\u00fc metotlar\u0131n\u0131n e\u015fde\u011feri olarak ise, \u00f6zellikle useEffect<\/code> Hook'u \u00f6ne \u00e7\u0131kmaktad\u0131r. useEffect<\/code>, bir bile\u015fenin ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fcn t\u00fcm fazlar\u0131n\u0131 (olu\u015fum, g\u00fcncelleme ve ayr\u0131lma) tek bir API ile ele almam\u0131z\u0131 sa\u011flar, bu da kodu daha okunabilir, mod\u00fcler ve yeniden kullan\u0131labilir hale getirir.\n <\/p>\nuseEffect<\/code> Hook'u, bile\u015fen render edildikten sonra (DOM g\u00fcncellendikten sonra) \u00e7al\u0131\u015fan yan etkileri (side effects) tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r. Bu yan etkiler; veri \u00e7ekme, abonelikleri ayarlama, DOM'u do\u011frudan manip\u00fcle etme veya event listener'lar\u0131 ekleme gibi i\u015flemleri i\u00e7erebilir. useEffect<\/code>'in g\u00fcc\u00fc, ba\u011f\u0131ml\u0131l\u0131k dizisi (dependency array) ve opsiyonel temizlik (cleanup) fonksiyonu sayesinde ya\u015fam d\u00f6ng\u00fcs\u00fcn\u00fcn farkl\u0131 anlar\u0131n\u0131 taklit edebilmesidir.\n <\/p>\n\n
useEffect(() => { ... }, [])<\/code>:<\/strong> Bo\u015f bir ba\u011f\u0131ml\u0131l\u0131k dizisi ile kullan\u0131ld\u0131\u011f\u0131nda, useEffect<\/code> sadece bile\u015fen ilk kez DOM'a eklendi\u011finde (mount) \u00e7al\u0131\u015f\u0131r ve componentDidMount<\/code>'a benzer bir davran\u0131\u015f sergiler.\n <\/li>\nuseEffect(() => { ... }, [dep1, dep2])<\/code>:<\/strong> Ba\u011f\u0131ml\u0131l\u0131k dizisine bir veya daha fazla de\u011fer (props<\/code> veya state<\/code>) eklendi\u011finde, useEffect<\/code> hem ilk mount an\u0131nda hem de ba\u011f\u0131ml\u0131l\u0131klardan herhangi biri de\u011fi\u015fti\u011finde tekrar \u00e7al\u0131\u015f\u0131r. Bu, componentDidMount<\/code> ve componentDidUpdate<\/code>'\u0131n birle\u015fimi gibidir.\n <\/li>\nuseEffect(() => { ... })<\/code>:<\/strong> Ba\u011f\u0131ml\u0131l\u0131k dizisi hi\u00e7 verilmedi\u011finde, useEffect<\/code> her render'dan sonra \u00e7al\u0131\u015f\u0131r. Bu genellikle \u00f6nerilmez, \u00e7\u00fcnk\u00fc gereksiz yan etkilere yol a\u00e7abilir.\n <\/li>\nuseEffect<\/code> Hook'u i\u00e7inde bir fonksiyon d\u00f6nd\u00fcr\u00fcrseniz, bu fonksiyon bile\u015fen ayr\u0131lmadan \u00f6nce (unmount) veya bir sonraki useEffect<\/code> \u00e7al\u0131\u015ft\u0131rmas\u0131ndan \u00f6nce (g\u00fcncelleme durumunda) tetiklenir. Bu, componentWillUnmount<\/code>'a benzer \u015fekilde temizlik i\u015flemleri yapmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n\nimport React, { useState, useEffect } from 'react';\n\nfunction KullaniciProfil() {\n const [kullanici, setKullanici] = useState(null);\n const [yukleniyor, setYukleniyor] = useState(true);\n const [intervalId, setIntervalId] = useState(null);\n\n \/\/ Veri \u00e7ekme ve timer ba\u015flatma (Mounting)\n useEffect(() => {\n console.log(\"useEffect \u00e7al\u0131\u015ft\u0131: Veri \u00e7ekiliyor ve timer ba\u015flat\u0131l\u0131yor.\");\n \/\/ API'den veri \u00e7ekme\n fetch('https:\/\/api.example.com\/kullanici\/1')\n .then(response => response.json())\n .then(data => {\n setKullanici(data);\n setYukleniyor(false);\n })\n .catch(error => console.error(\"Veri \u00e7ekme hatas\u0131:\", error));\n\n \/\/ Timer ba\u015flatma\n const id = setInterval(() => {\n console.log(\"Kullan\u0131c\u0131 profili aktif.\");\n }, 2000);\n setIntervalId(id);\n\n \/\/ Temizlik fonksiyonu (Unmounting)\n return () => {\n console.log(\"useEffect temizlik \u00e7al\u0131\u015ft\u0131: Timer durduruluyor.\");\n clearInterval(id);\n };\n }, []); \/\/ Bo\u015f ba\u011f\u0131ml\u0131l\u0131k dizisi: Sadece bir kez mount edildi\u011finde \u00e7al\u0131\u015f\u0131r\n\n \/\/ Kullan\u0131c\u0131 de\u011fi\u015fti\u011finde ba\u015fl\u0131k g\u00fcncelleme (Updating)\n useEffect(() => {\n if (kullanici) {\n document.title = ${kullanici.ad} ${kullanici.soyad} Profili<\/code>;\n console.log(\"Ba\u015fl\u0131k g\u00fcncellendi:\", document.title);\n }\n }, [kullanici]); \/\/ 'kullanici' state'i de\u011fi\u015fti\u011finde \u00e7al\u0131\u015f\u0131r\n\n if (yukleniyor) {\n return <div>Kullan\u0131c\u0131 bilgileri y\u00fckleniyor...<\/div>;\n }\n\n return (\n <div>\n <h3>{kullanici.ad} {kullanici.soyad}<\/h3>\n <p>Email: {kullanici.email}<\/p>\n <\/div>\n );\n}\n <\/code><\/pre>\n<\/p><\/div>\n<\/li>\n<\/ul>\nuseLayoutEffect<\/code> Hook'u, useEffect<\/code>'e benzer ancak DOM mutasyonlar\u0131ndan hemen sonra ve taray\u0131c\u0131 ekran\u0131 boyamadan \u00f6nce senkron olarak \u00e7al\u0131\u015f\u0131r. Genellikle DOM \u00f6l\u00e7\u00fcmleri veya g\u00f6rsel g\u00fcncellemeler yapman\u0131z gerekti\u011finde kullan\u0131l\u0131r. Performans a\u00e7\u0131s\u0131ndan useEffect<\/code> tercih edilmeli, useLayoutEffect<\/code> ise sadece g\u00f6rsel tutarl\u0131l\u0131k i\u00e7in gerekli oldu\u011funda kullan\u0131lmal\u0131d\u0131r. Ayr\u0131ca, useCallback<\/code> ve useMemo<\/code> gibi Hook'lar da fonksiyonel bile\u015fenlerde performans optimizasyonu i\u00e7in kritik rol oynar; gereksiz yeniden render'lar\u0131 ve pahal\u0131 hesaplamalar\u0131 \u00f6nlemeye yard\u0131mc\u0131 olurlar.\n <\/p>\nuseEffect<\/code> \u00e7a\u011fr\u0131s\u0131nda bir arada tutabiliriz, bu da kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131r\u0131r.\n <\/p>\nEtkile\u015fimli Diyagramlar\u0131n G\u00fcc\u00fc, Ger\u00e7ek D\u00fcnya Senaryolar\u0131 ve Geli\u015ftirici \u0130pu\u00e7lar\u0131<\/h2>\n
constructor<\/code>, getDerivedStateFromProps<\/code>, render<\/code> ve componentDidMount<\/code> metotlar\u0131n\u0131n s\u0131ras\u0131yla nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve her birinin alt\u0131nda k\u0131sa a\u00e7\u0131klamalar\u0131n\u0131 g\u00f6rebilirsiniz. Bir \"state\" veya \"prop\" de\u011fi\u015fikli\u011fini sim\u00fcle eden bir d\u00fc\u011fmeye t\u0131klad\u0131\u011f\u0131n\u0131zda ise, \"Updating\" faz\u0131n\u0131n nas\u0131l devreye girdi\u011fini ve shouldComponentUpdate<\/code>, render<\/code>, getSnapshotBeforeUpdate<\/code> ve componentDidUpdate<\/code>'in hangi s\u0131rayla \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6rsel olarak takip edebilirsiniz. B\u00f6yle bir ara\u00e7, teorik bilgiyi pratikle birle\u015ftirerek \u00f6\u011frenme s\u00fcrecini h\u0131zland\u0131r\u0131r ve peki\u015ftirir.\n <\/p>\n\n
componentDidMount<\/code> (ilk y\u00fckleme) ve componentDidUpdate<\/code> (veri de\u011fi\u015fti\u011finde) kullan\u0131n. Fonksiyonel bile\u015fenlerde ise useEffect<\/code> Hook'unu, ba\u011f\u0131ml\u0131l\u0131k dizisiyle birlikte kullanarak ayn\u0131 davran\u0131\u015f\u0131 elde edebilirsiniz. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n ID'si de\u011fi\u015fti\u011finde yeni profil verilerini \u00e7ekmek i\u00e7in useEffect(() => { ... }, [kullaniciId])<\/code> kullanabilirsiniz.\n <\/li>\nshouldComponentUpdate<\/code> veya PureComponent<\/code> kullanarak gereksiz yeniden render'lar\u0131 \u00f6nleyin. Fonksiyonel bile\u015fenlerde ise React.memo<\/code> (bile\u015fen i\u00e7in), useMemo<\/code> (pahal\u0131 hesaplamalar i\u00e7in) ve useCallback<\/code> (fonksiyonlar i\u00e7in) Hook'lar\u0131n\u0131 kullanarak performans kazanc\u0131 sa\u011flayabilirsiniz.\n <\/li>\ncomponentWillUnmount<\/code> i\u00e7inde abonelikleri iptal edin, timer'lar\u0131 temizleyin veya olay dinleyicilerini kald\u0131r\u0131n. Fonksiyonel bile\u015fenlerde ise useEffect<\/code>'in temizlik fonksiyonunu (return () => { ... }<\/code>) kullanarak ayn\u0131 i\u015flemleri yap\u0131n. Bu, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemenin en kritik ad\u0131mlar\u0131ndan biridir.\n <\/li>\nstatic getDerivedStateFromError()<\/code> ve componentDidCatch()<\/code> metotlar\u0131 ile olu\u015fturulur ve alt a\u011fa\u00e7taki JavaScript hatalar\u0131n\u0131 yakalayarak kullan\u0131c\u0131ya alternatif bir UI g\u00f6sterebilir.\n <\/li>\ncomponentDidMount<\/code> veya componentDidUpdate<\/code>, fonksiyonel bile\u015fenlerde ise useEffect<\/code> veya useLayoutEffect<\/code> (DOM g\u00fcncellenmeden hemen \u00f6nce) kullan\u0131n.\n <\/li>\n<\/ul>\nSonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n
constructor<\/code>, render<\/code>, componentDidMount<\/code>, shouldComponentUpdate<\/code>, componentDidUpdate<\/code> ve componentWillUnmount<\/code> gibi metotlar\u0131 hem de modern fonksiyonel bile\u015fenlerdeki useEffect<\/code> Hook'unun bu i\u015flevleri nas\u0131l tek bir \u00e7at\u0131 alt\u0131nda toplad\u0131\u011f\u0131n\u0131 detayl\u0131ca inceledik. Ya\u015fam d\u00f6ng\u00fcs\u00fc kavramlar\u0131n\u0131 anlamak, uygulaman\u0131z\u0131n performans\u0131n\u0131 optimize etmek, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek ve daha sa\u011flam, \u00f6ng\u00f6r\u00fclebilir kod yazmak i\u00e7in vazge\u00e7ilmezdir. Etkile\u015fimli bir diyagram\u0131n bu karma\u015f\u0131k s\u00fcre\u00e7leri g\u00f6rselle\u015ftirmedeki rol\u00fc, \u00f6\u011frenmeyi \u00e7ok daha kolay ve ak\u0131lda kal\u0131c\u0131 hale getirecektir. Unutmay\u0131n, React'in dinamik d\u00fcnyas\u0131nda ustala\u015fman\u0131n anahtar\u0131, bile\u015fenlerinizin ne zaman ve neden belirli \u015fekillerde davrand\u0131\u011f\u0131n\u0131 anlamaktan ge\u00e7er.\n <\/p>\nS\u0131k\u00e7a Sorulan Sorular<\/h3>\n
\n
componentDidMount()<\/code> metodunu kullanmal\u0131s\u0131n\u0131z. G\u00fcncelleme an\u0131nda veri \u00e7ekmek i\u00e7in componentDidUpdate()<\/code> i\u00e7inde prevProps<\/code> veya prevState<\/code> ile ko\u015fullu kontrol yaparak \u00e7a\u011fr\u0131 yapabilirsiniz. Fonksiyonel bile\u015fenlerde ise useEffect()<\/code> Hook'unu, ba\u011f\u0131ml\u0131l\u0131k dizisiyle birlikte kullanmal\u0131s\u0131n\u0131z (\u00f6rne\u011fin, useEffect(() => { \/* veri \u00e7ekme *\/ }, [])<\/code> ilk y\u00fckleme i\u00e7in, useEffect(() => { \/* veri \u00e7ekme *\/ }, [kullaniciId])<\/code> ise ba\u011f\u0131ml\u0131l\u0131k de\u011fi\u015fti\u011finde).\n <\/p>\n<\/li>\nshouldComponentUpdate<\/code> ile React.memo<\/code> aras\u0131ndaki fark nedir?<\/strong><\/p>\nshouldComponentUpdate<\/code> bir s\u0131n\u0131f bile\u015feni metodudur ve manuel olarak true<\/code> veya false<\/code> d\u00f6nd\u00fcrmeniz gerekir. React.memo<\/code> ise fonksiyonel bile\u015fenler i\u00e7in bir y\u00fcksek mertebeden bile\u015fendir (Higher-Order Component - HOC) ve props<\/code>'lar\u0131n s\u0131\u011f kar\u015f\u0131la\u015ft\u0131rmas\u0131n\u0131 (shallow comparison) otomatik olarak yaparak render'\u0131 engeller.\n <\/p>\n<\/li>\nuseEffect<\/code> i\u00e7indeki temizlik fonksiyonunu neden kullanmal\u0131y\u0131m?<\/strong><\/p>\nuseEffect<\/code>'in ba\u011f\u0131ml\u0131l\u0131klar\u0131 de\u011fi\u015fti\u011finde yeni bir yan etki \u00e7al\u0131\u015ft\u0131r\u0131lmadan \u00f6nce tetiklenir. Bu, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in olay dinleyicilerini kald\u0131rma, timer'lar\u0131 temizleme veya abonelikleri iptal etme gibi i\u015flemleri yapmak i\u00e7in kritik \u00f6neme sahiptir.\n <\/p>\n<\/li>\ncomponentWillMount<\/code> ve componentWillReceiveProps<\/code> gibi metotlar neden kald\u0131r\u0131ld\u0131?<\/strong><\/p>\ncomponentWillMount<\/code> i\u00e7inde yan etki yapmak, render s\u00fcrecini bloke edebilir veya birden fazla kez tetiklenebilir. Yerlerine static getDerivedStateFromProps<\/code> ve componentDidMount<\/code>\/componentDidUpdate<\/code> gibi daha g\u00fcvenli ve \u00f6ng\u00f6r\u00fclebilir metotlar \u00f6nerilmektedir.\n <\/p>\n<\/li>\nsetInterval<\/code>'i temizlemeden veya bir olay dinleyicisini kald\u0131rmadan bile\u015feni kald\u0131rmak bellek s\u0131z\u0131nt\u0131s\u0131na yol a\u00e7ar. Bunu \u00f6nlemek i\u00e7in, s\u0131n\u0131f bile\u015fenlerinde componentWillUnmount<\/code>, fonksiyonel bile\u015fenlerde ise useEffect<\/code>'in temizlik fonksiyonu i\u00e7inde t\u00fcm abonelikleri, timer'lar\u0131 ve olay dinleyicilerini mutlaka temizlemelisiniz.\n <\/p>\n<\/li>\n<\/ol>\n