React’te useEffect Hook’unun Etkin Kullanımı

Giriş

React Hooks, fonksiyonel bileşenlerde durum ve yaşam döngüsü yönetimini kolaylaştırır. useEffect, yan etkileri yönetmek için kullanılan temel bir hook'tur.

useEffect Hook’unun Temel Kullanımı

Örnek:

useEffect(() => {  // Bu kısım, bileşen her render olduğunda çalışır.  document.title = `Yeni başlık`;});

Bu örnek, bileşen her güncellendiğinde belge başlığını değiştirir.

Dependency Array’ın Önemi

Örnek:

const [count, setCount] = useState(0);useEffect(() => {  // Bu kısım, 'count' değişkeni değiştiğinde çalışır.  alert(`Count: ${count}`);}, [count]);

count değişkeni değiştiğinde useEffect tetiklenir.

Temizlik İşlemleri ve useEffect

Örnek:javascriptCopy code

useEffect(() => {  const timer = setTimeout(() => {    alert("Timer tamamlandı!");  }, 3000);  return () => clearTimeout(timer); // Bileşen yok olduğunda timer temizlenir.}, []);

Bu örnek, bileşen yok edildiğinde zamanlayıcıyı temizler.

useEffect ve Performans Optimizasyonu

Örnek:

const [searchTerm, setSearchTerm] = useState('');useEffect(() => {  const fetchData = async () => {    const response = await fetch(`https://api.example.com/search?q=${searchTerm}`);    // Veriler burada işlenir.  };if (searchTerm !== '') {    fetchData();  }}, [searchTerm]); // 'searchTerm' değiştiğinde useEffect tetiklenir.

Bu örnek, arama terimi değiştiğinde API’dan veri çeker.

Yaygın Yapılan Hatalar ve Bunlardan Kaçınma Yolları

Örnek:

useEffect(() => {  setCount(count + 1); // Bu satır sonsuz döngüye sebep olur.}, [count]);

count'u güncellemek, sürekli yeniden render'a yol açar.

Gelişmiş Kullanım Senaryoları

Örnek (Event Listeners):

useEffect(() => {  const handleResize = () => {    // Pencere boyutu değiştiğinde çalışacak kod.  };window.addEventListener("resize", handleResize);  return () => window.removeEventListener("resize", handleResize);}, []); // Boş dependency array, bu effect'in sadece mount'ta çalışacağını belirtir.

Bu örnek, pencere boyutu değiştiğinde çalışacak bir event listener ekler ve kaldırır.

Sonuç

useEffect hook'u, React'te yan etkileri yönetmek için güçlü ve esnek bir araçtır. Doğru kullanıldığında, uygulamanın performansını ve kullanıcı deneyimini önemli ölçüde iyileştirir.