React Hooks Rehberi: Modern React Geliştirmenin Temelleri

React Hooks Nedir?

React Hooks, React 16.8 sürümü ile tanıtılan ve fonksiyonel bileşenlerde durum yönetimi (state management) ve yaşam döngüsü (lifecycle) işlevlerini kullanmayı mümkün kılan bir özellik setidir. Hooks sayesinde, sınıf bileşenlerine (class components) ihtiyaç duymadan tam donanımlı React uygulamaları geliştirebilirsiniz.

Hooks'un tanıtılmasından önce, durum yönetimi ve yan etki (side effect) yönetimi yalnızca sınıf bileşenlerinde mümkündü. Bu durum, mantıksal olarak ilişkili kodun farklı yaşam döngüsü metotlarına dağılmasına ve kod tekrarına yol açıyordu. Hooks bu sorunları çözerek daha temiz, okunabilir ve yeniden kullanılabilir kod yazmayı sağlar.

useState: Durum Yönetiminin Temeli

useState, en temel ve en sık kullanılan Hook'tur. Fonksiyonel bir bileşene yerel durum eklemek için kullanılır.

useState'in Çalışma Prensibi

useState Hook'u çağrıldığında, mevcut durum değerini ve bu değeri güncellemek için bir fonksiyon içeren bir dizi döndürür. React, bileşen yeniden render edildiğinde bile durum değerini korur.

useState ile Dikkat Edilmesi Gerekenler

• Durumu doğrudan değiştirmeyin: Her zaman setter fonksiyonunu kullanın. Doğrudan mutasyon React'in değişikliği algılamasını engeller.
• Önceki duruma bağlı güncellemeler: Yeni durum önceki duruma bağlıysa, setter fonksiyonuna bir callback geçirin.
• Nesne ve dizi durumları: Nesneleri güncellerken spread operatörü ile yeni bir kopya oluşturun. React sığ karşılaştırma (shallow comparison) yapar.
• Tembel başlatma (lazy initialization): Başlangıç değeri hesaplanması maliyetliyse, bir fonksiyon geçirerek yalnızca ilk render'da hesaplanmasını sağlayabilirsiniz.

useEffect: Yan Etkileri Yönetmek

useEffect, fonksiyonel bileşenlerde yan etkileri (side effects) yönetmek için kullanılır. API çağrıları, abonelikler, zamanlayıcılar ve DOM manipülasyonu gibi işlemler yan etki olarak kabul edilir.

useEffect Bağımlılık Dizisi

useEffect'in ikinci parametresi olan bağımlılık dizisi (dependency array), efektin ne zaman çalışacağını kontrol eder. Bu parametre Hook'un davranışını dramatik biçimde değiştirir:

1. Bağımlılık dizisi olmadan: Her render'dan sonra çalışır. Genellikle istenmeyen bir durumdur ve performans sorunlarına yol açabilir.
2. Boş bağımlılık dizisi []: Yalnızca bileşen monte edildiğinde çalışır. componentDidMount ile eşdeğerdir.
3. Bağımlılıklarla [a, b]: a veya b değiştiğinde çalışır. Belirli değerlere tepki vermek için idealdir.

Temizleme (Cleanup) Fonksiyonu

useEffect'ten döndürülen fonksiyon, bileşen DOM'dan kaldırıldığında veya efekt yeniden çalışmadan önce çağrılır. Bu, bellek sızıntılarını önlemek için abonelikleri iptal etmek, zamanlayıcıları temizlemek ve olay dinleyicilerini kaldırmak amacıyla kullanılır.

useContext: Bileşen Ağacında Veri Paylaşımı

useContext, React Context API'sini fonksiyonel bileşenlerde kullanmanın kolay yoludur. Props drilling (veriyi alt bileşenlere kademe kademe aktarma) sorununu çözer.

Ne Zaman useContext Kullanmalı?

• Tema bilgisi (açık/koyu mod)
• Kullanıcı oturum bilgisi (authentication state)
• Dil ve yerelleştirme tercihleri
• Global uygulama ayarları

useContext Performans Uyarıları

Context değeri değiştiğinde, bu context'i kullanan tüm bileşenler yeniden render edilir. Bu nedenle, büyük uygulamalarda context'i mantıksal olarak ayırmak ve gereksiz render'ları önlemek için React.memo veya useMemo ile birlikte kullanmak önemlidir.

useReducer: Karmaşık Durum Mantığı

useReducer, karmaşık durum mantığını yönetmek için useState'e alternatif bir Hook'tur. Redux'a benzer bir yapıda çalışır ve durum geçişlerini açıkça tanımlamanızı sağlar.

useReducer Ne Zaman Tercih Edilmeli?

• Birbirine bağlı birden fazla durum değişkeni olduğunda
• Sonraki durum, önceki duruma bağlı olduğunda
• Karmaşık güncelleme mantığı olduğunda
• Durumu alt bileşenlere dispatch fonksiyonu ile iletmek istediğinizde

Reducer fonksiyonu, mevcut durum ve bir eylem (action) alarak yeni durumu döndürür. Bu yapı, durum geçişlerini merkezi bir yerde yönetmenizi ve test edilebilirliği artırmanızı sağlar.

useMemo: Hesaplama Sonuçlarını Önbelleğe Alma

useMemo, maliyetli hesaplamaların sonuçlarını önbelleğe alarak gereksiz yeniden hesaplamaları önler. Bağımlılıklar değişmediği sürece önceki sonucu döndürür.

useMemo Kullanım Senaryoları

• Büyük listelerin filtrelenmesi veya sıralanması
• Karmaşık matematiksel hesaplamalar
• Referans eşitliğini koruma gerekliliği (nesne ve dizilerde)
• Alt bileşenlere geçirilen türetilmiş veriler

Erken optimizasyon tüm kötülüklerin anasıdır. useMemo'yu yalnızca gerçek bir performans sorunu tespit ettiğinizde kullanın, her değer için değil.

useCallback: Fonksiyon Referanslarını Stabilize Etme

useCallback, bir callback fonksiyonunun memoize edilmiş versiyonunu döndürür. Bağımlılıklar değişmediği sürece aynı fonksiyon referansını korur.

useCallback Neden Gerekli?

JavaScript'te her render'da yeni fonksiyon nesneleri oluşturulur. Bu, React.memo ile sarılmış alt bileşenlerin gereksiz yere yeniden render edilmesine neden olabilir. useCallback, fonksiyon referansını stabil tutarak bu sorunu çözer.

useCallback vs useMemo

Özel (Custom) Hooks: Mantığı Yeniden Kullanma

Custom Hooks, bileşen mantığını yeniden kullanılabilir fonksiyonlara çıkarmanın güçlü bir yoludur. use ile başlayan herhangi bir fonksiyon, bir custom hook olarak kabul edilir ve içinde diğer hook'ları kullanabilir.

Popüler Custom Hook Örnekleri

• useLocalStorage: localStorage ile senkronize edilen durum yönetimi
• useFetch: Veri çekme, yükleme durumu ve hata yönetimi
• useDebounce: Kullanıcı girişini geciktirme (arama kutuları için ideal)
• useMediaQuery: Ekran boyutu değişikliklerini izleme
• useClickOutside: Bir elementin dışına tıklamayı algılama

Custom Hook Yazarken Dikkat Edilmesi Gerekenler

1. Hook adını use ile başlatın
2. İçinde diğer hook'ları kullanabilirsiniz
3. Hook kurallarına uyun (koşullu çağrı yapmayın, döngü içinde kullanmayın)
4. Arayüzü basit ve anlaşılır tutun
5. Gerektiğinde TypeScript ile tür güvenliği sağlayın

Hook Kuralları

React Hooks kullanırken iki temel kurala uymanız gerekir:

1. Yalnızca en üst seviyede çağırın: Hook'ları döngüler, koşullar veya iç içe fonksiyonlar içinde çağırmayın. Bu, React'in hook'ların çağrılma sırasını doğru takip etmesini sağlar.
2. Yalnızca React fonksiyonlarından çağırın: Hook'ları yalnızca fonksiyonel bileşenlerden veya custom hook'lardan çağırın. Normal JavaScript fonksiyonlarından çağırmayın.

Sonuç

React Hooks, modern React geliştirmenin temel taşlarıdır. useState ve useEffect gibi temel hook'lardan useMemo ve useCallback gibi optimizasyon hook'larına, useReducer ve useContext gibi gelişmiş durum yönetimi araçlarından custom hook'lara kadar geniş bir yelpaze sunar. Bu hook'ları doğru anlamak ve uygun yerlerde kullanmak, temiz, performanslı ve bakımı kolay React uygulamaları geliştirmenin anahtarıdır.