React'ta sık kullanılan useEffect Hook'u, component'in state'indeki değişiklikleri takip ederek hedeflenen fonksiyonların otomatik olarak çalışmasını sağlar Component'in mount, update ve unmount evrelerinde kullanılabilir ve React Hooks grubuna dahildir Bir API çağrısı yapmak için kullanılabilen örnekte olduğu gibi, useEffect Hook'u component'in mount evresinde API çağrısını gerçekleştirir ve sonucu state'e ekler Component'in Lifecycle'u, mount ve unmount safhalarından oluşur ve constructor ve render metotları tarafından başlatılır componentDidMount ve componentWillUnmount fonksiyonları ise, component'in hazırlık işlemlerini tamamlar ve sonlandırılması gerektiğinde serbest bırakır

useEffect Hooku, React'ta sıklıkla kullanılan bir özelliktir. Bu özellik, component'in render edilmesinden sonra yapılan çalışmaları takip ederek hedeflenen fonksiyonların çalışmasını sağlar. Component'in state'inde bir değişiklik olduğu zaman, useEffect Hooku component'in yeniden render edilmesini sağlar. Bu sayede, kullanıcının verileri ve component'leri güncel kalır.

useEffect Hooku, React Hook'ları grubuna aittir. İki parametre ile kullanılmaktadır. İlk parametre, useEffect hooku'nun yapılan işin adı ve ikinci parametre ise useEffect hooku'nun hangi koşullar altında çalışmasını istediğimiz koşulları sağlar. Bu koşullar, component'in state'indeki bir değişiklik veya bir API isteği sonrasında kullanıcı hedeflenen işlemlerin otomatik olarak yapılmasını isteyebilir.

useEffect Hooku'nun Kullanımı

React Hooks, React 16.8 sürümü ile birlikte tanıtılmış bir özelliktir. Bunlar, fonksiyonel bileşenlerde state ve diğer React özelliklerine erişmemizi sağlar. useEffect Hooku, React bileşenlerinde yan etkilere sahip olan işlemler için kullanılır.

Bu Hooku kullanarak, bileşenin mount olan, güncellenen veya demonte olma evresinde herhangi bir işlemi gerçekleştirebiliriz. useEffect Hooku, componentDidMount ve componentDidUpdate fonksiyonlarının yerini alır. Ayrıca, componentWillUnmount fonksiyonunu da yerine getirir.

Bir örnek kullanım senaryosu olarak, useEffect Hooku'nun bir API çağrısı yapmak için kullanılması verilebilir. Bileşen mount evresine girdiğinde useEffect Hooku, API'yi çağırır ve sonucu state'e ekler. Bu işlem, bileşenin güncelleme evresinde de gerçekleştirilebilir. Böylece, API'den sonuç getirilir ve güncelleme işlemi gerçekleştirilir.

useEffect Hooku Kullanımı	Açıklama
useEffect(() => {   // API çağrısı   fetchData()   .then(response => setResponse(response)) }, [])	Bileşen mount edildiğinde useEffect Hooku çağırılır ve API çağrısı gerçekleştirilir. Ayrıca, bileşenin mount edilme işleminden sonra bir kez daha çağrılır.
useEffect(() => {   // API çağrısı   fetchData()   .then(response => setResponse(response)) }, [id])	Bileşen güncelleme işlemi gerçekleştikten sonra useEffect Hooku, API çağrısı yapar ve sonucu state'e ekler. Bu işlem, sadece id propertysinin değişmesi durumunda gerçekleştirilir.

Bu örnekler, useEffect Hooku'nun kullanımını daha iyi anlamanıza yardımcı olabilir. Bu Hook, React bileşenlerinde işlemleri gerçekleştirmek için çok yaygın bir şekilde kullanılan bir yöntemdir.

Component Lifecycle

React uygulamalarında, her bir component'in kendine özgü bir yaşam döngüsü vardır. Bu yaşam döngüsü, Component Lifecycle olarak adlandırılır. Bir component'in hayatı, üç farklı aşamada ilerler: Mounting, Updating ve Unmounting. Bu aşamaların her birinde, component'in birçok farklı durumu vardır.

Mounting aşaması, component'in DOM'a eklenmesiyle başlar. Bu aşamada, component'in state 'i ve props'ları belirtilir. Component, bir kez Mounting işleminden geçer ve bu aşama sırasında constructor() ve render() metotları çalıştırılır.

Unmounting aşaması ise, component'in DOM'dan silinmesiyle gerçekleşir. Bu aşamada, component sonlanır ve kullandığı tüm kaynaklar serbest bırakılır. Unmounting işlemi, component'in kullanımı sona erdiğinde gerçekleştirilir.

Updating aşaması, component'in kullanıcının etkileşimi sonucu alacağı herhangi bir değişimi içerir. Component'in state'i ve props'ları değiştirildiğinde, Updating aşamasına girilir. Bu aşamada, component'in render() metodu tekrardan çalıştırılır ve değiştirilen değerler güncellenir.

Bir component'in tüm bu aşamalarını yönetmek için react, önceden belirlenmiş metotlar ve fonksiyonlar sunar. Bu metotlar, component'in ihtiyaç duyduğu işlemleri yapar ve bu işlemleri yaparken component'in farklı durumlarını yönetir.

componentDidMount, Mounting işlemi tamamlandıktan sonra çalıştırılır ve component'in tüm hazırlıklarını tamamlar. componentWillUnmount ise, component'in sonlandırılması gerekirse çalıştırılır ve kullanımdan kaldırılması sağlanır.

Updating işlemi tamamlandıktan sonra ise, componentDidUpdate metodu devreye girer ve güncellenen değerleri işler.

Component Lifecycle sayesinde, component'lerin birçok farklı durumu yönetilebilir ve istenilen işlemler gerçekleştirilebilir. Bu sayede component'lerin hızlı ve doğru bir şekilde kullanımı sağlanabilir.

Mounting ve Unmounting

Mounting ve Unmounting, Component Lifecycle'nin ilk iki aşamasını temsil eder. Mounting, component'in DOM'a render edilmesi ve React uygulamasının ilk kez bu component'i görmesi anlamına gelir. Unmounting ise component'in DOM'dan çıkartılması ve React uygulamasının artık bu component'i görmemesi anlamına gelir.

Mounting safhası, component'in constructor() fonksiyonunun çalıştırılmasıyla başlar. Render fonksiyonu çağırılarak JSX kodu çalıştırılır ve HTML olarak render edilir. Component'in durumu (state) ve props'ları bu aşamada dağıtılır ve component'in tüm fonksiyonları hazır hale getirilir. Mounting safhasının sonunda componentDidMount() fonksiyonu çağrılır ve komponent tamamen render edildikten sonra bu yöntem çalıştırılır.

Unmounting safhası, component'in artık kullanılmadığı zaman gerçekleştirilir. Bu aşamada component'in componentWillUnmount() işlevi çağrılır ve component'in işlevleri ve hafızası temizlenir. Component sonlandırıldığında, hafızadan da kaldırılır ve React uygulaması yeniden render edildiğinde görüntülenmez.

Mounting ve Unmounting safhaları, React uygulamaları için oldukça önemli bir rol oynar. Unmounting, hafıza kaynaklarının boşa gitmesini ve uygulama performansının artmasını sağlar. Yeni component'ler render edilirken, Mounting aşaması, yeni component'in açılış fonksiyonlarının çağrılması için kullanılır. Bu nedenle, bu iki aşamanın optimizasyonu, React uygulamalarında verimliliği artırmak için çok önemlidir.

componentDidMount

componentDidMount, React class component'lerindeki bir metodu başlatmak için kullanılan bir methoddur. Component'in DOM'a yerleşmesinden sonra (mounting) çalıştırılır ve genellikle AJAX çağrıları, API istekleri gibi işlemlerde kullanılır. Component'in ilk rendering'inden sonra sadece bir kere çalıştırılır. Bu, component'in gerçekleştirilmesi için gerekli olan her şeyin yüklü olduğundan emin olmak için bir fırsattır. Bu methodun kullanılması, component'in doğru şekilde başlatılmasına ve gerektiği gibi çalışmasına yardımcı olur.Aşağıdaki örnekte, componentDidMount'in nasıl kullanılabileceğini açıklayacağız. Örneğimizde, useEffect Hooku'nun kullanımı yerine React class component'lerinde componentDidMount'in kullanımını göstereceğiz. Bu örnek, bir kullanıcının adını ve soyadını gösterecek olan basit bir bileşen olacak.```javascriptimport React, { Component } from 'react';class User extends Component { constructor(props) { super(props); this.state = { name: 'Can', surname: 'Yılmaz', fullName: 'Can Yılmaz', }; } componentDidMount() { setTimeout(() => { this.setState({ fullName: `${this.state.name} ${this.state.surname}` }); }, 2000); } render() { return ( ); }}```Yukarıdaki örnekte, User adlı bir bileşen tanımlanıyor. componentDidMount, bileşenin kendi constructor'ından sonra ve component'in oluşturulmasından sonra çağrılır. Bu örnekte, setTimeout kullanılır ve this.setState aracılığıyla bileşenin fullname özelliği güncellenir. App'i çalıştırdığınızda, ad ve soyadınız iki saniye sonra birleşir ve bileşenin fullname özelliğinde görüntülenir.Bu örnek, componentDidMount'i ve React class component'inin temel işlevselliğini göstermektedir. Bu methodun kullanılması, AJAX istekleri ve API çağrıları gibi component'in doğru çalışması için gereksinim duyulan herhangi bir sonlandırma işlemi için kullanılabilir.

componentWillUnmount

componentWillUnmount() metodu, bir component'in DOM'dan kaldırılması gerektiği zaman çağrılır. Bu metod, component'in boşa gitmelerini (memory leaks) önlemek için yararlıdır.

componentWillUnmount() metodunun kullanımı önemlidir. Özellikle, component içinde yer alan elemenlerin değiştirilmesi gerektiği durumlarda çağrılması önemlidir. componentWillUnmount() metodu, önceki componentDidMount() metoduna benzer şekilde çalışır. Ancak, componentWillUnmount() metodu component'in kaldırılması durumunda çalıştığından, bir compile süreci yoktur.

componentWillUnmount() metodu ile ilgili detaylar
componentWillUnmount() metodu, bir component'in kaldırılması gerektiği zaman çağrılır.
componentWillUnmount() metodunun kullanımı, component'in içinde yer alan elemenlerin değiştirilmesi gerektiği durumlarda önemlidir.
componentWillUnmount() metodu, boşa gitmelerin (memory leaks) önlenmesini sağlar.

componentWillUnmount() metodu, aynı zamanda component'in sona erme sürecinde bulunmasına yardımcı olur. Böylece, component'in doğru bir şekilde yönetilmesi sağlanır.

Kısaca, componentWillUnmount() metodu, component'in kaldırılması gerektiği durumlarda çağrılır. Bu metodun kullanımı, component'in içinde yer alan elemenlerin değiştirilmesi gerektiği durumlarda önemlidir. Ayrıca, bu metod boşa gitmelerin (memory leaks) önlenmesini sağlar ve component'in doğru bir şekilde yönetilmesini sağlar.

Updating ve componentDidUpdate

React uygulamalarında bir bileşen güncellendiğinde, yani yeni bir props veya state değeri geldiğinde, güncelleme safhası gerçekleşir. Bu safha ikiye ayrılır, biri Updating safhası, diğeri ise componentDidUpdate safhasıdır.

Updating safhası, bileşenin yeni props veya state değerleriyle yine render edilmesine neden olur. Bu da bileşenin yeniden oluşmasına sebep olabilir. Ancak bu safha, direkt olarak DOM'a bir değişiklik yapmaz.

componentDidUpdate, bileşen güncellendiğinde gerçekleşen son safhadır. Bu safha, bileşenin yeniden oluşturulduktan sonra ve yeniden render edildikten sonra çağrılır. componentDidUpdate, önceki state ve props değerleri ile mevcut state ve props değerleri karşılaştırılarak güncelleme sonrası bir eylem gerçekleştirilmesine olanak tanır.

componentDidUpdate, özellikle asenkron işlemler sonrasında DOM'a müdahale etmek için sıkça kullanılır. Örneğin, bir form gönderildiğinde veya bir API isteği yapıldığında, sonucunu ekranda göstermek için componentDidUpdate kullanılabilir.

Tablolar veya listeler, componentDidUpdate kullanarak yapılacak işlemleri açıklamak için faydalı olabilir. Ancak, componentDidUpdate doğru kullanılmazsa performans sorunlarına neden olabilir. Bu nedenle, componentDidUpdate'in kullanımında dikkatli olunması gerekmektedir.

useEffect Hooku'nun Kullanım Avantajları

useEffect Hooku, React'ta en çok kullanılan bir Hook'tur ve sayfaların belirli durumlarındaki render edilme işlemleri süresince çalışır. Bu nedenle, useEffect Hooku'nun kullanım avantajları da oldukça fazladır.

Bunun bir örneği şudur: Bir uygulamada, kullanıcının belirli bir düğmeye tıkladığında bir API çağrısı yapmasını istiyoruz. useEffect Hooku sayesinde, bu işlemi kullanıcının sayfanın ilk yüklendiği anda çağırmasını veya herhangi bir veri değişikliğinde otomatik olarak tekrar çağırmasını sağlayabiliriz.

useEffect Hooku'nun başka bir kullanım avantajı, kullanıcının tarayıcıda gezinirken sayfadaki verilerin güncel kalmasını sağlamasıdır. Örneğin, bir kullanıcının bir öğeyi sepete eklediğinde sayfanın otomatik olarak güncellenmesini sağlayabiliriz. Bu sayede, kullanıcının sayfayı yenilemesi gerekmez ve güncel veriler her zaman kullanılabilir olur.

Ayrıca, useEffect Hooku zamanlayıcılar ve Animasyonlar için de kullanılabilir. Örneğin, belirli bir süre sonra kullanıcının tarayıcısındaki belirli bir öğenin kaybolmasını istediğimizde useEffect Hooku'nu kullanabiliriz. Bu sayede, animasyonu tekrar kullanabilir ve kodu daha okunaklı hale getirebiliriz.

Sonuç olarak, useEffect Hooku'nun kullanım avantajları oldukça fazladır ve React uygulamalarında vazgeçilmez bir role sahiptir. Bu Hook sayesinde, veriler otomatik olarak güncellenebilir, kullanıcılar tarafından yapılan işlemler takip edilebilir ve animasyonlar kolayca oluşturulabilir. Ancak, useEffect Hooku'nun gereksiz kullanımından kaçınmak önemlidir. Bu nedenle, Hook'un ihtiyacı olan yerlerde doğru şekilde kullanılması gerekmektedir.