React Hooks, React uygulamalarında kullanılan özel fonksiyonlarla state, lifecycle ve context gibi özellikleri kullanmak için geliştirilmiştir useState Hook'u, state yönetimini sağlar ve component'in render edilmesi sırasında kullanılır useEffect Hook'u, component'in mount, update ve unmount anlarında çalıştırılan işlevleri sağlar useRef Hook'u, somut DOM elemanlarına veya diğer React componentlerine erişim sağlamak için kullanılır Form elemanlarına erişmek için useRef Hook'u kullanılabilir React Hooks, kodun tekrar kullanılabilirliğini arttırır ve React uygulamalarını daha fonksiyonel bir yapıya kavuşturarak okunabilirlik ve performansı arttırır

React Hooks, React uygulamalarındaki state, lifecycle ve context gibi özellikleri kullanmak için fonksiyon bileşenlerinde kullanılan özel fonksiyonlardır. Class bileşenleri yerine kullanılabildiği gibi, kodun tekrar kullanılabilirliği arttırır ve bileşenler arasındaki kodu paylaşmayı kolaylaştırır. React Hooks, React uygulamalarını daha fonksiyonel bir yapıya kavuşturur ve kodun okunabilirliği ve performansı arttırır.

useState Hook'u

useState Hook'u, React uygulamalarında state'lerin kullanımını sağlar. Component'in render edilmesi sırasında, bu hook kapsamındaki değiştirilebilir state değeri ayrı ayrı tutulur. Bu sayede her bir state için ayrı bir fonksiyon yazmak yerine, state değerlerini birleştiren bir hook ile yalnızca bir fonksiyona ihtiyacımız olur.

Bir örnek olarak, kullanıcı adı ve şifrenin tutulduğu bir form elemanına sahip bir LoginForm component'i düşünelim. useState Hook'u kullanarak, kullanıcı adı ve şifre değerlerini state olarak tanımlayabiliriz. Kod yapısını daha anlaşılır bir hale getirmek için bir tablo ekleyebiliriz:

Değişken	State	Setter Fonksiyonu
username	'', boş string	setUsername
password	'', boş string	setPassword

Kullanıcı herhangi bir form elemanına dokunduğunda, state değiştirme fonksiyonları set edilir ve state değeri güncellenir. Bu sayede LoginForm component'i güncellenir ve herhangi bir form elemanına yapılan değişiklikler anında render edilir.

useEffect Hook'u

React Hooks'un en önemli Hook'larından biri olan useEffect Hook'u, component'in mount, update ve unmount anlarında çalıştırılan işlevleri sağlar. useState Hook'u ile state yönetimini tamamlarken useEffect Hook'u, component'in hayat döngüsü boyunca veri almak, veri göndermek, animasyon yapmak gibi istekleri yönetir. useEffect Hook'u kullanımı oldukça basittir ve örnekleri mevcuttur. Bu Hook'u kullanırken temiz bir kod yazmak için dependency array'i kullanmak gerekir. Dependency array, useEffect Hook'u'nun sadece belirli olan state'i işlemesi için kullanılır. Örneğin, useEffect Hook'u sayfa açıldığında çalıştırılmak istenen bir işlev için kullanılırsa, dependency array içerisinde bir değişken belirlenir ve bu değişken değiştiğinde useEffect Hook'u tekrardan çalışır.

useEffect Hook'u ile API çağrıları

React Hooks kullanarak useEffect Hook’unu kullanarak API çağrılarının yapılması mümkündür. useEffect Hook’u bir component’in render edilmesi sırasında uygun bir yerde çağrılır ve burada API çağrısı yapılabilir. Bu sayede, component’in state’i API çağrısının sonucuna göre güncellenebilir. Örneğin, bir kullanıcının ismini ve şehrini içeren bir API çağrısı yapılır ve sonuçlara göre component’in state’i güncellenir. Bu sayede, kullanıcı ismi ve şehri değiştirildiğinde component’in hemen güncellenmesi sağlanır. useEffect Hook’u ayrıca component’in unmount edilmesi durumunda temizlik yapmak için de kullanılabilir. Bu şekilde, önbellekte gereksiz veriler birikmesi engellenir.

useEffect Hook'u ile component yaşam döngüsü

useEffect Hook'u React'ta en sık kullanılan Hook'lardan biridir ve component yaşam döngüsünü kontrol etmek için kullanılır. useEffect, component'in monte edilme zamanı, güncelleme zamanı ve silinme zamanı gibi yaşam döngüsü aşamalarında farklı işlemleri yapmak için kullanılır. Component ilk olarak ekranda görüntülendiğinde, useEffect'in ilk parametresine geçirilen fonksiyon çalıştırılır. Bu fonksiyon component her güncellendiğinde tekrar çalıştırılır. Bu nedenle, bu Hook'u kullanarak component içerisinde farklı işlemler yapılabilir.

• Bir API çağrısı yapabilir,
• Bir event listener ekleyebilir,
• Belirli bir süre sonra bir işlem gerçekleştirebilir,
• Ve daha birçok şey yapılabilir.

useEffect Hook'u kullanırken dikkat edilmesi gereken en önemli husus, bir döngüye girmemektir. Bu nedenle, useEffect içerisinde kullanılan değişkenlerin, fonksiyonların vs. mutlaka useEffect'in ikinci parametresine geçilmesi gerekmektedir. Aksi takdirde, fonksiyon sürekli olarak çalıştığı için sayfa performansı düşecektir. Bunun yanı sıra, useEffect tekrar çalıştırılmadan önce önceki fonksiyonun tamamlanmasını bekler, bu nedenle bazı durumlarda sayfada bir gecikme yaşanabilir. Bu nedenle, useEffect'in mümkün olduğunca verimli bir şekilde kullanılması önerilir.

useRef Hook'u

useRef Hook'u, React uygulamalarında somut DOM elemanlarına veya diğer React componentlerine erişim sağlamak için kullanılır. useRef, bir değişkeni tutmak ve son değerine doğrudan erişim sağlamak için kullanılır. Bu sayede component yeniden render edildiğinde bile bu değişkenin tuttuğu son değer mevcut kalır.

Bir örnek vermek gerekirse, bir input elemanının içeriğinden bir değer okumak ve bu değeri bir API çağrısı yaparken kullanmak istediğinizde useRef kullanabilirsiniz. useRef, input elemanına referans alabilmenizi ve input'a yapılan son değer değişikliğini izleyebilmenizi sağlar.

useRef Örnekleri	Kullanım Amacı
const countRef = useRef(0);	Bir sayacın değerini tutmak
const inputRef = useRef(null);	Bir input elemanına referans almak

useRef Hook'u ile form elemanlarına erişim

useRef Hook'u kullanarak form elemanlarına nasıl erişileceği hakkında 30 kelime içeren bir cümle

useRef Hook'u, React'ta form elemanlarına erişmek için sıkça kullanılan bir yöntemdir. useRef, bir component'in ömrü boyunca sürekli olarak aynı referansı döndürür ve form elemanlarına kolayca erişim sağlar. Bu yöntemle, input, textarea, select gibi form elemanlarının tutulduğu referanslar alınarak, bunların değerlerini component'in içinde kullanmak mümkündür. Bu sayede, form verilerini kolayca okuyabilir ve güncelleyebilirsiniz. useRef Hook'u özellikle büyük form sayfaları için oldukça kullanışlıdır ve React'in performansını artırır.

useContext Hook'u

useContext Hook'u, React uygulamalarındaki global state yönetimi için kullanılan bir diğer Hook'tur. useContext Hook'u, props drilling adı verilen ve state'in tüm component ağacı boyunca aktarılmasına neden olan işlemi engeller. Bunun yerine, useContext Hook'u kullanarak global state, context adı verilen bir yapı içinde tutulur ve içerisindeki değerler tüm component'ler tarafından erişilebilir hale gelir. Bu, uygulamanın performansını artırır ve kodun daha okunaklı hale gelmesini sağlar. Örneğin, bir tema seçimi uygulamasında, seçilen tema değeri useContext Hook'u kullanılarak context içinde tutulabilir ve uygulamadaki tüm component'ler tarafından erişilebilir hale gelebilir. Bu, state'in tek bir yerde tutulmasını ve tüm component'ler tarafından kolayca değiştirilebilmesini sağlar.

useContext Hook'u ile global state yönetimi

useContext Hook'u, global state yönetimini kolaylaştırmak için kullanılır. createContext() yöntemiyle oluşturulan bir context nesnesi, tüm bileşenler tarafından erişilebilir halde tutulur. useContext() yöntemi, context nesnesine erişim sağlar ve global state verilerini okuyabilir ve değiştirebilir. Bu sayede, veri iletimi için bileşenler arasında props kullanma ihtiyacı ortadan kalkar ve kod tekrarı azaltılır.