React'te useEffect Hook'unu Doğru Kullanma Rehberi 🚀

React'te useEffect Hook'unu Doğru Kullanma Rehberi

Selam dostlar! Bugün sizlerle, React dünyasında en çok kullanılan ama bazen yanlış anlaşılan hook'lardan biri olan useEffect'i konuşacağız. Yeni başlayan arkadaşların sıkça takıldığı, deneyimli geliştiricilerin bile bazen gözden kaçırdığı noktaları, samimi bir dille ele alalım. Amacımız, bu güçlü aracı verimli ve temiz bir şekilde kullanmayı öğrenmek. Hadi başlayalım!

useEffect Nedir ve Ne İşe Yarar?

Basitçe söylemek gerekirse, useEffect, fonksiyonel bileşenlerimizde yan etkileri (side effects) yönetmemizi sağlayan bir React Hook'udur. Peki "yan etki" ne demek? Bileşeninizin asıl işi (JSX döndürmek) dışında kalan, dünyayı etkileyen her türlü işlem:

• API'den veri çekmek
• DOM'u manuel olarak manipüle etmek
• Abonelikler (subscriptions) oluşturmak veya temizlemek
• Timer'lar (setInterval, setTimeout) kurmak

React, render işleminin saf (pure) olmasını ister. useEffect, bu saf olmayan işlemleri bileşenin yaşam döngüsüne uygun şekilde yapmamız için bir "kaçış kapısı" sunar.

Temel Kullanım ve Bağımlılık Dizisi

useEffect iki argüman alır: bir efekt fonksiyonu ve bir bağımlılık dizisi (dependency array).

• Hiç bağımlılık dizisi vermezsek: Efekt, her render'dan sonra çalışır. Dikkatli olun, bu performans sorunlarına veya sonsuz döngülere neden olabilir!
  
  Kod:

  useEffect(() => {
    console.log('Bu her renderda çalışır!');
  });

• Boş bir bağımlılık dizisi ([]) verirsek: Efekt, yalnızca bileşen ilk kez render edildiğinde (mount) çalışır. ComponentDidMount gibi düşünebilirsiniz.
  
  Kod:

  useEffect(() => {
    console.log('Bu sadece ilk yüklemede çalışır.');
    // API çağrısı burada yapılabilir
  }, []);

• Bağımlılık dizisine değişken(ler) eklersek: Efekt, yalnızca o değişkenlerden en az biri değiştiğinde çalışır. ComponentDidUpdate'in belirli bir prop'a bağlı versiyonu gibi.
  
  Kod:

  useEffect(() => {
    console.log(`Kullanıcı ID'si değişti: ${userId}`);
    // Kullanıcı verilerini yeniden çek
  }, [userId]); // Sadece `userId` değişirse tetiklenir

En Kritik Kural: Temizleme (Cleanup)

Bu, en çok gözden kaçan ama en önemli kısım! useEffect'inizin geri döndürdüğü (return ettiği) fonksiyon, temizleme (cleanup) işlevi görür. Bu fonksiyon:

• Bileşen DOM'dan kaldırılmadan önce (unmount)
• VEYA bir sonraki efekt çalıştırılmadan önce (bağımlılıklar değiştiğinde)

...otomatik olarak çağrılır. Neden gerekli?

• Bellek sızıntılarını önlemek için: Kurduğunuz abonelikleri (event listener, websocket, interval) iptal etmezseniz, bileşen gitse de onlar çalışmaya devam eder!
  
  Kod:

  useEffect(() => {
    const intervalId = setInterval(() => {
      console.log('Her saniye çalışıyorum!');
    }, 1000);
  
    // TEMİZLEME FONKSİYONU: Interval'i temizle
    return () => {
      clearInterval(intervalId);
      console.log('Interval temizlendi!');
    };
  }, []);

• Geçersiz durum güncellemelerini önlemek için: Bir API çağrısı tamamlanmadan bileşen unmount olursa, state güncellemeye çalışmak hata verebilir. Cleanup'da bir "iptal bayrağı" kullanabilirsiniz.

Sık Yapılan Hatalar ve İpuçları

• Gereksiz Bağımlılıklar: useEffect içinde kullandığınız her değişkeni bağımlılık dizisine eklemek zorunda değilsiniz. setState fonksiyonları ve useRef'in .current değeri sabittir, eklenmez. Fonksiyonları da useCallback ile sarmalayarak bağımlılık sorunlarını çözebilirsiniz.
• Sonsuz Döngü Tuzağı: Bir useEffect'in içinde, bağımlılık dizisinde olan bir state'i güncellemek, efekti tekrar tetikler ve sonsuz bir döngü yaratır! Dikkatli olun.
• Veri Çekme ve Race Condition: Hızlı arka arkaya değişen bağımlılıklarla (örn: arama kutusu) API çağrısı yaparken, önceki isteğin sonucunun sonrakini ezmemesi için cleanup fonksiyonunda iptal mekanizması kullanın.
• useEffect'i "Her Şey İçin" Kullanmak: Bazen işiniz useEffect ile değil, bir event handler (onClick gibi) ile veya state değişkeninin türetilmiş değeri (derived state) ile halledilebilir. Daha basit çözümleri tercih edin.

Özet ve Son Tavsiyeler

useEffect, React'in fonksiyonel bileşenlerde yaşam döngüsü mantığını yönetmenin anahtarıdır. Onu doğru kullanmak, daha performanslı, hatasız ve bakımı kolay uygulamalar geliştirmenizi sağlar.

• Her useEffect'in bir amacı olmalı. (Veri çekmek, abonelik kurmak vb.)
• Bağımlılık dizinizi dikkatlice düşünün. Eksik veya fazla olması sorun yaratır.
• Temizleme (cleanup) yapmayı asla unutmayın! Bu alışkanlık sizi birçok gizli hatadan kurtaracak.
• Karmaşık efekt mantığını özelleştirilmiş custom hook'lara çıkararak kodunuzu temizleyin.

Umarım bu rehber, useEffect konusundaki sis perdesini biraz olsun aralamanıza yardımcı olmuştur. Takıldığınız yerleri yorumlarda sorabilirsiniz, birlikte çözelim. Bir sonraki yazıda görüşmek üzere, kodunuz bol, hatalarınız az olsun!