React Hooks Nedir ve Nasıl Kullanılır? (2026)

İçindekiler

React Hooks Nedir? Hook’lara Giriş

React Hooks, class component'lerin özelliklerini (state, yaşam döngüsü metodları vb.) functional component'lerde kullanmamızı sağlayan React fonksiyonlarıdır. Hook'ların çıkışı React'in 16.8 sürümünde başlamıştır. Bu geliştirmeden sonra class component'lerin popüleritesi düşmüştür, ama hala kullanılabilir; React, class component'leri kaldırmayı planlamıyor.

Hook Çeşitleri

React'in sunduğu birçok hook çeşidi bulunur. En çok kullanılanları useState, useEffect, useRef, useMemo, useReducer ve useCallback'tir. Bu hook'ların dışında React, kendi hook'unuzu (custom hook) yazmanız için de bir kolaylık sağlar.

Öncelikle bu örnekleri açıklayalım ve her birine birer örnek yapalım. Sonrasında kendimize bir custom hook yazalım.

useState Nedir ve Nasıl Kullanılır?

useState, adından da anlaşılacağı üzere functional component'in içinde kullanabileceğimiz bir state oluşturmamıza olanak sağlar. Class component'lerde kullandığımız state ile aynı işleve sahiptir, ama yazım tarzı biraz daha farklıdır.

UseState Nedir?

Yukarıdaki örnekte görebileceğimiz üzere ilk değeri 0 olan bir "count" state'i tanımladık. Ardından bu state'i return kısmında gösteriyoruz. Bir buton yardımıyla setCount işlemiyle her butona basıldığında count state'ini 1 artırıyoruz.

useEffect Nedir ve Nasıl Kullanılır?

useEffect, React'teki yaşam döngüsü evrelerinin birçoğunu barındıran bir hook'tur. Mount, unmount ve update evrelerinin hepsinde çalışma kapasitesine sahiptir. Bu evreleri kullanmak için useEffect'te belirli koşullar vardır. Bu evrelerin dışında state'e bağlı bir çalışma yöntemi daha vardır. Bunların her biri için ayrı örnekler verip inceleyelim.

useEffect nedir?

Yukarıdaki örnekte useEffect hook'unun unmount evresindeki yazım şeklini görüyoruz. Uygulama unmount olduğunda, yani sayfadan ayrılınca, "count" state'i 1'e setlenecek.

useEffect Nedir? Kullanımı

Yukarıdaki örnekte useEffect'in update evresindeki yazım şeklini görüyoruz. Fakat ilk mount evresinde de bu metod çalışır; tıpkı componentDidUpdate fonksiyonu gibi bir çalışma mantığı vardır. State güncellemesi olduğu anda konsolda "Count Increase 1" yazısını göreceğiz. Yani butona her tıklandığında konsolda bu yazı gözükecek.

React useEffect

Son örneğimizde useEffect'in bir state'e bağlı olarak update olma ve çalışma yazımını görüyoruz. "count" state'i her güncellendiğinde useEffect hook'u çalışacak ve konsolda "Count Increased" yazısını göreceğiz. useEffect'i bağlı değişkenlerle tetiklemek için köşeli parantez içine istediğimiz değişkenleri yazabiliriz. Bu değişkenlerden herhangi biri değiştiğinde useEffect tetiklenir.

useRef Nedir ve Nasıl Kullanılır?

useRef hook'u, bir component'teki mutable bir değeri, component'in tekrar render olmasını tetiklemeden tutmamızı sağlar. Bu mutable değer değiştirildiğinde bellekteki değer değişir, ama component tetiklenmediği için o değeri ekranda göremeyiz.

useRef Nedir?

Örnekte görebileceğimiz gibi "count" değişkenimiz butona basıldığında 1 fazlasına setleniyor, fakat görüntüleme kısmında 0 değeri hiç değişmeyecek. Sadece bellekteki değeri değiştirmiş olacağız.

useMemo Nedir ve Nasıl Kullanılır?

useMemo hook'unu anlatmadan önce memoization'ın ne olduğunu açıklamak gerekir. Memoization, yazdığımız kodla yaptığımız hesaptan çıkan sonucu tutan ve girdi değişmediği sürece hesaplamayı tekrar çalıştırmadan sonucu bize tekrar döndüren yapıya denir. Bu sonuçların saklanması ucuz bir işlem değildir, bu yüzden sadece yüksek maliyetli işlevlerde kullanılması gerekir. useMemo hook'u bu yapıyı kullanmamızı sağlar ve iki parametre alır: ilki memoization yapmak istediğimiz işlem, ikincisi ise bu işlemde kullanılan bağımlılıklardır.

Aşağıdaki örnek genelde tüm projelerde kullanılabilecek bir yapı değil, ama useMemo'nun çalışma mantığını göstermek amacıyla hazırlandı. Bir kullanıcı listemiz var; input yardımıyla arama yapıp listemizi güncelliyoruz. Buton yardımıyla arama inputuna yazdığımız kelimeyi tekrar aynı arama fonksiyonuna gönderiyoruz. Diyelim ki bir arama yaptık ve listemiz güncellendi. Fonksiyonumuzu useMemo'ya sardığımız için bu değer kaydedilecek; buton tekrar tıklanıp fonksiyon aynı parametreyle tekrar çağrılınca fonksiyon çalışmayacak, önceki dönen sonucu bize tekrar verecektir.

useReducer Nedir ve Nasıl Kullanılır?

useReducer, aslında useState'in bir alternatifidir. Daha önce Redux kullandıysanız yapısına çok benzer. State sayısı arttığında ve karmaşıklaştığında daha çok tercih edilir. Fakat React projelerinde genellikle Redux kullanıldığı için bu hook yerine useDispatch ve useSelector hook'larını kullanırız. Onlara da birer örnek verelim.

useReducer nedir?

useReducer kullanımı

Yukarıdaki örnekte bir initial state'imiz ve içinde iki değişkenimiz var. Bunların set fonksiyonlarını da yazdık ve useReducer hook'umuza bağladık. Bu hook'tan dönen state nesnesi, initial state'teki değişkenleri çağırmamıza; dispatch fonksiyonu ise store'daki fonksiyonları kullanmamıza olanak sağlar.

useReducer Nedir, React

Yukarıdaki örnekte useDispatch ve useSelector örneklerini görüyoruz. useDispatch ile Redux kullandığımız yapıdaki action'ımızı kullanabiliyoruz. useSelector ise reducer'daki state'lere erişebilmemizi sağlıyor.

useCallback Nedir ve Nasıl Kullanılır?

useCallback, useMemo'nun yapısına çok benzemekle beraber döndürdüğü sonuç biraz farklıdır. useMemo aldığı fonksiyonun sonucunu saklar, useCallback ise fonksiyonun kendisini saklar ve bağımlılıklar değişmediği sürece saklı fonksiyonu döndürür.

useCallback Nedir?

Yukarıdaki örnek, useMemo hook'unda yaptığımız örneğe çok benzemekle birlikte tek farklılığı, useCallback hook'unu kullanmamız ve bu sayede "filteredUsers" olarak useMemo'da dönen değerin artık "filteredUserFunc" fonksiyonu olmasıdır. useCallback ile sardığımız fonksiyon, "search" parametresi değişmediği sürece tekrar render olmayacak ve bize aynı listeyi döndürmeye devam edecektir.

Custom Hook Oluşturma

Baştan sona bize ait olan bir hook (custom hook) oluşturmak, React'in bize sağladığı esnekliklerden biridir. Kendimize ait küçük bir örnek hook oluşturalım.

Custom Hook Oluşturma

Yukarıdaki örnekte çok basit bir custom hook oluşturduk. "personID" prop'unu alıp "PersonArr" listemizdeki kişileri arayan ve gönderilen kişinin id'sine göre o kişinin yaşını döndüren bir hook oluşturmuş olduk. Kullanımına da bir örnek yazalım.

Custom Hook Oluşturma

Yukarıdaki örnekte yazdığımız "usePersonAge" hook'umuza 1 id'sini yolladık ve listedeki ilk kişinin yaşını bize döndürmüş oldu.

Sonuç

React'in sunduğu hook'lar yukarıda gösterdiğimizden çok daha fazla olmasına karşılık, biz bir kaç tanesini inceledik. Hook yapısı, functional component'lerin kullanımını yaygınlaştırmakla beraber yazım kolaylığı ve esneklik sağlıyor. Özellikle class component'lerin yaşam döngüsü metodlarında yaşanan sıkıntılardan ötürü, hook'ların daha temiz ve anlaşılır olması kod karmaşıklığını azaltıp yazım kolaylığı sağlıyor.

React Hooks: Sıkça Sorulan Sorular

Class component’lerden hook’lara geçmek zorunlu mu?

Hayır. React, class component'leri kaldırmayı planlamıyor; mevcut class component'ler çalışmaya devam eder. Ancak yeni geliştirilen kodlarda hook'lar artık standart yaklaşımdır.

useMemo ve useCallback arasındaki fark nedir?

useMemo bir hesaplamanın sonucunu saklar; useCallback ise fonksiyonun kendisini saklar. İkisi de gereksiz yeniden hesaplamayı önler, ama farklı türde değerler için kullanılır.

useReducer ne zaman useState’e tercih edilmeli?

State sayısı arttığında veya state güncellemeleri birbirine bağlı karmaşık mantıklar içerdiğinde useReducer daha okunaklı ve yönetilebilir bir yapı sunar.

Custom hook yazmanın avantajı nedir?

Custom hook'lar, birden fazla component'te tekrarlanan state ve mantık kodunu tek bir yerde toplamanızı sağlar; bu da kod tekrarını azaltıp bakımı kolaylaştırır.

Hook’ları koşullu ifadelerin (if, for) içinde kullanabilir miyim?

Hayır. React'in "Hooks Kuralları" (Rules of Hooks) gereği, hook'ları yalnızca fonksiyonun en üst seviyesinde çağırmanız gerekir; koşul, döngü veya iç içe fonksiyonların içinde çağırmak beklenmedik hatalara yol açar.

İlginizi Çekebilecek Diğer Yazılım Rehberlerimiz

Asenkron JavaScript kodunu daha iyi anlamak isterseniz Callback, Promise, Async/Await Kullanımı ve Farkları yazımıza göz atabilirsiniz. Farklı bir dil veya teknoloji öğrenmek isterseniz Go Programlama Diline Giriş yazımız iyi bir başlangıç noktasıdır. Backend tarafında çalışıyorsanız Sequelize Nedir? yazımıza göz atabilirsiniz.