Skip to main content

React Hook'ları (useState ve useEffect) Kullanımı

React 16.8 sürümüyle gelen Hook’lar, sınıf bileşenlerinin karmaşık yapısını ortadan kaldırarak, işlevsel bileşenlerle daha sade ve güçlü uygulamalar oluşturmayı sağlar.
Bu rehberde, useState ve useEffect Hook’larını kullanarak durum yönetimini, yaşam döngüsünü ve yan etkileri nasıl yöneteceğinizi öğreneceksiniz.

🎯 Bu Rehberde Ne Öğreneceksiniz?​

  • useState Hook’u ile bileşen durumunu yönetmeyi
  • useEffect ile yaşam döngüsünü kontrol etmeyi
  • API’den veri çekmeyi ve bileşen kaldırma (unmount) işlemlerini
  • Bağımlılık dizisiyle performans optimizasyonunu

⚙️ Ön Gereksinimler​

  • Temel düzeyde React ve JavaScript ES6 bilgisi
  • create-react-app ile oluşturulmuş bir proje
  • Fonksiyonel ve sınıf bileşenleri arasındaki farkı bilmek

1️⃣ useState() ile Durum Yönetimi​

useState, bir bileşene içsel durum (state) eklemenin en basit yoludur.
Artık this.state veya this.setState gibi karmaşık yapılarla uğraşmadan, sadece birkaç satır kodla durum yönetebilirsiniz.

🔹 Temel Kullanım​

import React, { useState } from 'react';

function SkorSayaci() {
  const [sayi, setSayi] = useState(0);

  return (
    <div>
      <h1>{sayi}</h1>
      <button onClick={() => setSayi(sayi + 1)}>Sayacı Arttır</button>
    </div>
  );
}

useState(0), başlangıç değeri 0 olan bir state oluşturur. Dönen dizinin ilk elemanı (sayi) mevcut değeri, ikinci elemanı (setSayi) ise güncelleme fonksiyonudur.

🔹 Birden Fazla useState Kullanımı​

Aynı bileşende birden fazla durum değişkeni tanımlayabilirsiniz:


import React, { useState } from 'react';

function KullaniciGiris() {
  const [kullaniciAdi, setKullaniciAdi] = useState('');
  const [sifre, setSifre] = useState('');

  return (
    <form>
      <label>
        Kullanıcı Adı:
        <input value={kullaniciAdi} onChange={e => setKullaniciAdi(e.target.value)} />
      </label>
      <br />
      <label>
        Şifre:
        <input value={sifre} onChange={e => setSifre(e.target.value)} type="password" />
      </label>
      <button type="submit">Giriş Yap</button>
    </form>
  );
}

Her useState çağrısı farklı bir veriyi yönetir; bu, bileşeni daha modüler hale getirir.

2️⃣ useEffect() ile Yaşam Döngüsü ve Yan Etkiler​

useEffect, sınıf bileşenlerindeki componentDidMount, componentDidUpdate ve componentWillUnmount metodlarının yerini alır. Bu Hook, her render sonrası çalışarak yan etkileri (side effects) yönetir.

🔹 Temel Kullanım​


import React, { useState, useEffect } from 'react';

function SkorSayaci() {
  const [sayi, setSayi] = useState(0);

  useEffect(() => {
    document.title = `Skor: ${sayi}`;
    console.log("Yeni skor:", sayi);
  });

  return (
    <div>
      <h1>{sayi}</h1>
      <button onClick={() => setSayi(sayi + 1)}>Arttır</button>
    </div>
  );
}

useEffect, her render işleminden sonra çalışır ve burada tarayıcı başlığı güncellenir.

3️⃣ useEffect Bağımlılık Dizisi: Ne Zaman Çalışsın?​

useEffect’e ikinci bir argüman olarak bağımlılık dizisi ([]) eklenebilir.

Boş dizi ([]) → Sadece ilk yüklemede çalışır.

Değer içeren dizi ([sayi]) → Yalnızca belirtilen değer değiştiğinde çalışır.


useEffect(() => {
  console.log("Bileşen ilk kez yüklendi.");
}, []); // sadece mount

useEffect(() => {
  console.log("Sayı değişti:", sayi);
}, [sayi]); // sadece 'sayi' değiştiğinde

Bu sayede gereksiz render’lar engellenir ve performans korunur.

4️⃣ Temizleme (Cleanup) İşlemleri​

Bileşen kaldırıldığında (unmount), useEffect içinden bir fonksiyon döndürerek kaynakları serbest bırakabilirsiniz.


useEffect(() => {
  console.log("Bileşen aktif.");

  return () => console.log("Bileşen kaldırıldı (unmounted).");
}, []);

Bu yapı, componentWillUnmount’ın modern karşılığıdır.

5️⃣ useEffect ile API'den Veri Çekme​

React’ta harici bir API’den veri çekmek için fetch() fonksiyonunu useEffect içinde kullanabilirsiniz.


import React, { useState, useEffect } from 'react';

function RabisuKullanicilari() {
  const [kullanicilar, setKullanicilar] = useState([]);

  useEffect(() => {
    fetch('https://api.github.com/users')
      .then(res => res.json())
      .then(data => setKullanicilar(data));
  }, []);

  return (
    <div>
      {kullanicilar.map(k => (
        <div key={k.id}>
          <h4>{k.login}</h4>
        </div>
      ))}
    </div>
  );
}

Boş dizi sayesinde bu kod yalnızca bileşen ilk yüklendiğinde çalışır.

🙋‍♀️ Sıkça Sorulan Sorular (SSS)​

  1. Hook'lar neden sadece işlevsel bileşenlerde çalışır?

Çünkü sınıf bileşenleri zaten kendi yaşam döngüsüne sahiptir. Hook’lar, fonksiyonel bileşenlere bu özellikleri kazandırır.

  1. useState içindeki set fonksiyonları neden asenkron çalışır?

React performans için state güncellemelerini gruplar. Bu nedenle değişiklikler anında değil, sonraki render’da yansır.

  1. useEffect bağımlılık dizisine fonksiyon eklemeli miyim?

Evet, Hook içinde dışarıda tanımlanmış her değişken veya fonksiyon bağımlılığa eklenmelidir. Bu tutarlı davranışı garanti eder.

  1. Kendi özel Hook’larımı yazabilir miyim?

Evet. Kendi useXXX Hook’unuzu oluşturabilir ve bileşenler arasında tekrar kullanabilirsiniz.

  1. useEffect ve useLayoutEffect farkı nedir?

useEffect asenkron çalışır (render’dan sonra). useLayoutEffect ise senkron çalışır (render’dan hemen önce). DOM ölçümü gerekiyorsa useLayoutEffect kullanılır.

🚀 Sonuç​

Artık React Hook’ları ile sınıf yapısına gerek kalmadan güçlü, sade ve yeniden kullanılabilir bileşenler oluşturabilirsiniz. useState durum yönetimini, useEffect ise yaşam döngüsünü tek satırla halleder.

💡 Uygulamanızı Rabisu Bulut Platformu üzerinde test edin, anında canlıya alın!