React hook’ları: useState, useEffect ve diğerleri açıkça anlatıldı

Kısaca: Hook’lar, React bileşenlerinin durum ve yan etkileri kullandığı işlevlerdir; useState değerleri saklar, useEffect işlemeden sonra çalışır, özel hook’lar mantığı paketler.

Biraz daha ayrıntılı: React’te bileşenler arayüzü tanımlayan işlevlerdir. Hook’larla (React 16.8’den beri) sınıflar olmadan bellek ve olaylara tepki kazanırlar. Kurallar: hook’ları bileşenin en üst düzeyinde ve yalnızca bileşenlerde veya özel hook’larda çağır.

Ayrıntılı

useState: durum

function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>Clicked: {n}</button>;
}

Durum setN ile değiştirildiğinde React bileşeni yeniden işler. Durumu asla doğrudan değiştirme (n++, list.push), bunun yerine yeni değerler ata (setList([...list, x])). Eski değere bağlıysa: setN(v => v + 1).

useEffect: yan etkiler

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id); // temizlik
}, [tick]); // bağımlılıklar

React’in dışındaki şeyler için: veri yükleme, zamanlayıcılar, olay dinleyicileri, belge başlığı. Bağımlılık dizisi efektin ne zaman yeniden çalışacağına karar verir ([] = ilk işlemeden sonra bir kez). Temizlik işlevi sızıntıları önler. İşleme sırasında hesaplamanın yettiği yerde efektlerden kaçın; verileri sunucu bileşenleri, TanStack Query veya SWR ile yüklemek daha iyidir.

Diğer önemli hook’lar

• useRef: yeniden işlemeden değiştirilebilir değer/DOM erişimi.
• useMemo / useCallback: sonuçları/işlevleri önbelleğe alır (yalnızca gerçek performans sorunları için).
• useContext: tüm düzeylerden geçirmeden değerler.
• useReducer: eylemlerle karmaşık durum.
• useTransition / useDeferredValue: girdiyi akıcı tut.
• Özel hook’lar (useOnline(), useLocalStorage()) yeniden kullanılabilir mantığı paketler.

Tipik hatalar

• Sonsuz döngü: uygun bağımlılıklar olmadan bir efektte durum ayarlamak.
• Bayat closure: unutulan bağımlılıklar; ESLint kuralı react-hooks/exhaustive-deps’i kullan.
• Türetilebilir durum mu? O zaman saklamak yerine hesapla.
• Çoğaltmak yerine durumu yukarı taşı.
• Listelerde key’leri kararlı seç.

Alıştırma yap: küçük projeler (yapılacaklar listesi, sayaç, arama filtresi) ve react.dev’deki resmî belgeler.

Ayrıca bak: React, Next.js App Router, TypeScript, Olaylar