React ile çalışan herkesin bir noktada yaşadığı o an vardır. Class component yazarsın. Constructor, bind’lar, lifecycle metodları derken kod uzar. Bir süre sonra “Bu işi daha sade yapmanın yolu yok mu?” diye sorarsın. İşte React Hooks tam da bu sorudan doğdu.
10 yıldır frontend tarafında React kullanan biri olarak şunu net söyleyebilirim. React Hooks: Fonksiyonel Bileşenlerin Yükselişi sadece yeni bir API’nin gelmesi değil. React’te düşünme biçiminin değişmesi demek. Bu yazıda react class componentlerden fonksiyonel componentlere geçiş sürecini, useState ve useEffect hook’ları nasıl çalışır sorusunu, react hooks nedir yeni başlayanlar için sade bir dille anlatacağım. Custom hook nasıl yazılır ve ne zaman kullanılır konusuna da gerçek örneklerle değineceğiz. Amacım seni ezberden uzaklaştırmak ve gerçekten ne yaptığını bilen bir React geliştiricisi olmana yardımcı olmak.
React Hooks Nedir?
Hooks Kavramının Tanımı
Hook’lar, React fonksiyonel bileşenlerinde state ve lifecycle benzeri özellikleri kullanmanı sağlayan fonksiyonlardır. Daha önce sadece class component’lerde olan birçok yetenek, Hooks ile fonksiyonel bileşenlere taşındı.
Hooks Neden Ortaya Çıktı?
React ekibi, yıllar içinde class component’lerin bazı sorunlarını net biçimde gördü. Kod tekrarları artıyordu. Logic reuse zorlaşıyordu. Lifecycle metodları yeni başlayanlar için karmaşık geliyordu. Hooks, bu problemlere daha sade bir yaklaşım sundu.
React’te Yeni Bir Dönem
Hooks ile birlikte React, fonksiyonel programlamaya daha yakın bir çizgiye geldi. Bugün yeni yazılan projelerin çok büyük bir kısmı tamamen fonksiyonel bileşenler üzerine kurulu.
Class Component’lerden Fonksiyonel Bileşenlere Geçiş
Class Component’lerin Zorlukları
Class component yazarken constructor, this bağlamı, method bind etme gibi detaylarla uğraşırsın. Kodun büyük kısmı iş mantığı değil, altyapı olur.
Lifecycle Karmaşası
componentDidMount, componentDidUpdate, componentWillUnmount… Aynı iş mantığı bazen birden fazla lifecycle metoduna dağılır. Bu da kodun okunmasını zorlaştırır.
Fonksiyonel Bileşenlerin Avantajları
Fonksiyonel bileşenler daha kısa, daha okunabilir ve test edilmesi daha kolaydır. Hooks sayesinde state ve side effect’ler açık şekilde ayrılır. Bu, özellikle ekip içinde büyük fark yaratır.
En Temel React Hook’ları
useState
State Yönetiminin Basitleşmesi
useState, fonksiyonel bileşenlerde state kullanmanın temel yoludur.
const [count, setCount] = useState(0);
Bu kadar. Ne constructor var ne this. State güncelleme açık ve nettir.
useEffect
Lifecycle Mantığı ile İlişkisi
useEffect, side effect’leri yönetmek için kullanılır. API çağrıları, event listener ekleme, loglama gibi işlemler burada yapılır.
useEffect(() => {
fetchData();
}, []);
Boş dependency array, bu effect’in sadece ilk render’da çalışacağını belirtir.
useContext
Prop drilling problemini azaltmak için kullanılır. Global veya yarı-global state’leri bileşen ağacında rahatça paylaşmanı sağlar.
useRef
DOM elemanlarına erişmek veya render tetiklemeden mutable değerler tutmak için kullanılır. Özellikle input focus yönetiminde çok işe yarar.
Hooks’un Mental Modeli
Render Mantığını Anlamak
Fonksiyonel bileşenler her render’da baştan çalışır. Bu, class component’lerden gelenler için ilk başta şaşırtıcı olabilir.
React Neden Tekrar Render Eder?
State veya props değiştiğinde React ilgili bileşeni yeniden render eder. Bu normaldir. Önemli olan gereksiz render’ları kontrol altına almaktır.
State ve Effect Ayrımı
State, “ne var” sorusunun cevabıdır. Effect ise “ne oluyor” sorusunu yanıtlar. Bu ayrımı net yapmak, hook’ları doğru kullanmanın temelidir.
Rules of Hooks
Neden Kurallar Var?
Hooks belirli kurallarla çalışır çünkü React render sırasında hook çağrı sırasına göre state eşlemesi yapar. Bu düzen bozulursa React neyin ne olduğunu bilemez.
Hook’ları Koşul İçinde Kullanmamak
Hook’lar her zaman component’in en üst seviyesinde çağrılmalıdır. if içinde, loop içinde çağrılmamalıdır.
Custom Hook Yazarken Dikkat Edilecekler
Custom hook’lar da aynı kurallara tabidir. İçeride hook kullanıyorsan, dışarıdan çağrıldığı yerde koşula sokmamalısın.
Custom Hooks ile Logic Reuse
Custom Hook Nedir?
Custom hook, birden fazla component’te kullanılan logic’i tek bir fonksiyon altında toplamanı sağlar. İsmi use ile başlar.
Ne Zaman Custom Hook Yazılmalı?
Aynı useEffect ve useState kombinasyonunu iki üç yerde kopyalamaya başladıysan, custom hook zamanı gelmiş demektir.
Gerçek Hayat Custom Hook Örnekleri
Form yönetimi, window size takibi, authentication durumu gibi konular custom hook’lar için çok uygundur.
Performans ve Hooks
Gereksiz Render Problemleri
Her render kötü değildir. Ama ağır hesaplamalar varsa kontrol altına almak gerekir.
useCallback ve useMemo Ne Zaman Gerekli?
Bu hook’lar her yerde kullanılmamalıdır. Gerçekten referans eşitliği problemi yaşıyorsan veya pahalı hesaplamalar varsa anlamlıdır.
Erken Optimizasyon Tuzağı
Yeni başlayanların en sık düştüğü tuzak budur. Önce okunabilir kod yaz. Sonra gerçekten sorun varsa optimize et.
useEffect En Sık Yapılan Hatalar
Dependency Array Yanlışları
Eksik dependency eklemek bug’a davetiye çıkarır. React’ın uyarılarını dikkate almak gerekir.
Sonsuz Döngü Problemi
Effect içinde state güncelleyip dependency array’i yanlış yazarsan sonsuz render döngüsüne girersin.
Cleanup Fonksiyonlarını Unutmak
Event listener, interval gibi kaynaklar kullanıyorsan cleanup fonksiyonu yazmalısın.
Büyük Projelerde React Hooks
Component Sorumluluklarını Bölmek
Hooks, component’leri daha küçük ve odaklı parçalara ayırmayı kolaylaştırır.
State Yönetimi (Context vs External Store)
Küçük ve orta projelerde Context yeterli olabilir. Daha büyük projelerde external store’lar tercih edilebilir.
Hooks ile Test Yazmak
Custom hook’lar izole şekilde test edilebilir. Bu, test stratejisini oldukça güçlendirir.
Hooks vs Class Components
Kod Okunabilirliği Karşılaştırması
Hooks ile yazılmış fonksiyonel bileşenler genellikle daha kısa ve anlaşılırdır.
Öğrenme Eğrisi
Başta zihinsel model değişikliği gerekir. Ama bir kez oturdu mu geri dönmek istemezsin.
Güncel React Ekosisteminde Hangisi?
Yeni dokümantasyonlar ve örneklerin neredeyse tamamı Hooks üzerinden ilerliyor. Bu da yönü net gösteriyor.
React Hooks Gelecek mi?
React Dokümantasyonunun Yönü
Resmi React dokümantasyonu fonksiyonel bileşenleri ve hook’ları merkeze alıyor.
Yeni Başlayanlar İçin Hooks
Artık React öğrenmeye başlayanlar class component görmeden Hooks ile ilerliyor.
Class Component’lerin Geleceği
Class component’ler tamamen yok olmayacak. Ama yeni projelerde tercih edilme oranı çok düşük.
Sonuç – Hooks Sadece Bir API Değil
Daha Temiz ve Sürdürülebilir Kod
React Hooks: Fonksiyonel Bileşenlerin Yükselişi, daha sade ve sürdürülebilir kod yazmanın kapısını açtı.
React’te Düşünme Şeklini Değiştirmek
Hooks, React’te nasıl düşündüğünü değiştirir. State, effect ve render ilişkisini daha net görmeni sağlar.
Hooks’u Anlayarak Kullanmanın Önemi
Ezber değil, anlayarak kullanılan Hooks seni bir üst seviyeye taşır.
React tarafında kendini geliştirmek, eğitim ve mentorluk seçeneklerini görmek istersen https://www.diyarbakiryazilim.org/services sayfasına göz atabilirsin. Topluluğu tanımak için https://www.diyarbakiryazilim.org/about iyi bir başlangıç olur. React eğitimi ve frontend toplulukları yakınımda diyorsan, Diyarbakır Yazılım Topluluğu seni bekliyor.
Frontend dünyasında farklı yaklaşımları da görmek için şu yazı sana iyi bir perspektif sunabilir: https://www.diyarbakiryazilim.org/posts/mobil-gelistirmede-flutter-vs-react-native.
Sık Sorulan Sorular
React Hooks nedir ve neden fonksiyonel bileşenlerde tercih edilir?
React Hooks, fonksiyonel bileşenlerde state ve lifecycle benzeri özellikleri kullanmayı sağlar. Daha sade kod ve daha iyi logic paylaşımı sunduğu için tercih edilir.
En sık kullanılan React Hooks hangileridir ve ne işe yararlar?
useState state yönetimi için, useEffect side effect’ler için, useContext veri paylaşımı için, useRef ise DOM erişimi ve mutable değerler için kullanılır.
React Hooks ile class component arasındaki temel farklar nelerdir?
Hooks fonksiyonel bileşenlerde kullanılır ve daha sade bir yapı sunar. Class component’lerde lifecycle ve this bağlamı gibi ek karmaşıklıklar vardır.
React Hooks kullanırken performans ve state yönetimi nasıl optimize edilir?
Gereksiz render’ları analiz etmek, bağımlılıkları doğru yazmak ve sadece ihtiyaç varsa useMemo veya useCallback kullanmak en sağlıklı yaklaşımdır.
React Hooks eğitimi veya kursu yakınımda nerede bulunur?
Yerel yazılım toplulukları, online eğitim platformları ve mentorluk programları iyi bir başlangıçtır. Diyarbakır tarafında eğitim ve topluluk etkinlikleri için https://www.diyarbakiryazilim.org/about sayfasını inceleyebilirsin.