React Hooks nasıl kullanılır: useState ve useEffect rehberi

Hook nedir, hangi kurallara bağlıdır?

Hook'lar, fonksiyon bileşenlerinin React özelliklerine bağlanmasını sağlayan fonksiyonlardır. useState bir bileşene durum (state) ekler, useEffect bileşeni bir dış sistemle eşler. Adları use ile başlar.

React'in temel kuralları şunlardır: Hook'lar yalnızca bileşenin ya da başka bir özel hook'un en üst düzeyinde çağrılır; döngü, koşul ya da iç içe fonksiyon içinde çağrılmaz. Ayrıca hook'lar yalnızca fonksiyon bileşenlerinde ya da özel hook'larda kullanılır, sıradan fonksiyonlarda kullanılmaz. Neden böyle? React, hook'ları çağrı sırasına göre eşler; sıra render'dan render'a değişirse hangi değerin hangi hook'a ait olduğunu şaşırır. Lint kuralı bu hataları yakalar, devre dışı bırakmayın.

useState: durumu doğru güncellemek

Temel kullanım:

const [open, setOpen] = useState(false);

Köşeli parantezdeki ilk değer o anki durumdur, ikincisi onu güncelleyen fonksiyondur. Başlangıç değeri yalnızca ilk render'da kullanılır.

Şu davranışları bilmek sık görülen hataları önler:

• Durum bir anlık görüntüdür. set fonksiyonunu çağırmak, çalışmakta olan koddaki değişkeni değiştirmez; yeni değer bir sonraki render'da gelir. setName çağırdıktan hemen sonra name'i okursanız eski değeri görürsünüz.
• Önceki değere bağlı güncellemede güncelleyici fonksiyon kullanın: setItems(prev => [...prev, yeniOge]). Aynı olay içinde birden çok güncelleme yapıyorsanız, her biri güncel kuyruk değeriyle çalışır.
• Nesne ve dizileri değiştirmeyin, yenisini üretin. form.ad = "Ayşe" yazıp setForm(form) çağırmak ekranı güncellemez, çünkü React aynı referansı görür. Doğrusu setForm({ ...form, ad: "Ayşe" }). Dizilerde spread, map ve filter kullanın.
• Başlangıç değeri hesaplaması pahalıysa fonksiyonu çağırmayın, fonksiyonun kendisini verin: useState(baslangicListesiOlustur). Böylece hesap yalnızca bir kez yapılır.

useEffect: yalnızca dış sistemle eşleşmek için

useEffect, bileşenin render'ından sonra çalışan ve bileşeni bir dış sistemle senkron tutan koddur: bir sunucu bağlantısı, bir tarayıcı API'si, bir sayaç ya da üçüncü taraf bir kütüphane. React belgesi şunu özellikle vurgular: bir dış sisteme bağlanmıyorsanız büyük olasılıkla Effect'e ihtiyacınız yoktur.

Yapı şöyledir:

useEffect(() => { // kurulum: bağlan, abone ol return () => { // temizlik: bağlantıyı kes, aboneliği bırak }; }, [bagimlilik]);

Bağımlılık dizisi davranışı belirler. Dizide değer varsa Effect ilk render'dan sonra ve o değerler değiştikçe çalışır. Dizi boşsa yalnızca ilk render'dan sonra çalışır. Dizi hiç verilmezse her render'dan sonra çalışır. Effect içinde kullandığınız her tepkisel değer (prop, durum, bileşen içinde tanımlı değişken) dizide olmalıdır; lint uyarısını susturmak sessiz hatalara yol açar.

Temizlik fonksiyonu, bağımlılıklar değiştiğinde yeni kurulumdan önce, bileşen ekrandan kalkarken de son kez çalışır. Geliştirme modunda Strict Mode açıkken React, ilk kurulumdan önce bir kurulum-temizlik döngüsünü fazladan çalıştırır; amaç temizliği unuttuğunuz yerleri ortaya çıkarmaktır.

Örnek: arama kutusuna göre veri çekmek

Örneğin kullanıcı yazdıkça sonuçları getiren bir arama bileşeni olsun. Sorun, hızlı yazıldığında eski isteğin yanıtının yeni isteğin yanıtından sonra gelip ekranı bozabilmesidir. Temizlik fonksiyonu bunu çözer:

const [sorgu, setSorgu] = useState(""); const [sonuclar, setSonuclar] = useState([]);

useEffect(() => { let yoksay = false; fetch("/api/products?q=" + sorgu) .then(r => r.json()) .then(veri => { if (!yoksay) setSonuclar(veri); }); return () => { yoksay = true; }; }, [sorgu]);

Sorgu her değiştiğinde önceki Effect'in temizliği çalışır ve eski yanıt yoksayılır. Gerçek projelerde veri çekmeyi bileşen içindeki Effect yerine framework'ün veri mekanizmasına ya da TanStack Query gibi bir istemci önbelleğine bırakmak React belgesinin de önerdiği yoldur; bu örnek Effect'in mantığını anlamak içindir.

Effect yazmadan çözülebilecek durumlar

Yeni başlayanların en sık hatası her şeyi Effect'e koymaktır. Şu durumlarda Effect gerekmez:

• Başka durumdan türetilen değer: tam adı ad ve soyaddan türetiyorsanız bunu render sırasında hesaplayın, ayrı bir durum ve Effect ile eşitlemeyin.
• Kullanıcı olayına verilen tepki: bir düğmeye tıklayınca yapılacak işi onClick işleyicisinde yapın.
• Bileşen durumunu sıfırlamak: key değiştirerek bileşeni yeniden oluşturmak çoğunlukla daha sade bir çözümdür.

Durum güncelleyip hemen başka durum güncelleyen Effect zincirleri, gereksiz render ve karmaşa üretir. Bu zinciri gördüğünüzde hesabı render'a ya da olay işleyicisine taşıyın.

Öğrenme yolu: başlangıçtan özel hook'lara

• Başlangıç: useState ile form alanı, aç-kapa menü, liste ekleme-silme. Nesne ve dizi güncellemesini el alışkanlığına dönüştürün.
• Orta: useEffect ile belge başlığı, pencere boyutu dinleme, veri çekme; her Effect için temizlik gerekip gerekmediğini sorun.
• İleri: Tekrarlanan hook mantığını özel hook'a çıkarın, örneğin useWindowBoyutu ya da useLocalStorage. Özel hook, durumu paylaşmaz; yalnızca mantığı paylaşır.
• Sonraki: useRef, useReducer ve useContext gibi hook'larla durum mimarisine geçin.

Her aşamada küçük bir bileşeni yazıp React Developer Tools ile durumu izlemek, render akışını anlamayı hızlandırır.

Sık yapılan hatalar

• Hook'u koşul ya da döngü içinde çağırmak.
• Durumu doğrudan değiştirmek (push, nesne alanı atama) ve ekranın yenilenmemesine şaşırmak.
• Bağımlılık dizisini boş bırakıp içeride değişen değerleri kullanmak; Effect eski değerlerle çalışır.
• Temizlik yazmayı unutmak; olay dinleyicileri ve zamanlayıcılar birikir.
• Dizide nesne ya da fonksiyonu bağımlılık yapıp her render'da yeni referans üretmek; Effect sürekli yeniden çalışır.
• Her türetilmiş değer için ayrı durum açmak.

Bu beceriyi Mindset programlarında nerede çalışırsınız?

Modern Web Geliştirme, Frontend (React) programı "React Hooks ile State ve Yan Etkiler" modülüyle bu konuyu işler; "Bileşen Mimarisi ve Props Sistemi" ve "Global State Yönetimi" modülleri önünü ve ardını tamamlar. JavaScript bilen ve React'e geçmek isteyen geliştiriciler ile ön yüz ekibine yeni katılanlar için uygundur.

Kurumsal ekiplerde aynı kod tabanında çalışan geliştiricilerin ortak hook ve durum alışkanlıkları edinmesi için kullanılabilir; bu tür bir eğitim ekip içi kod incelemelerinde ortak dil oluşturur.