useEffect Hook
useEffect Hook, React’in fonksiyonel bileşenlerinde yan etkileri (side effects) yönetmek için kullanılan temel bir yapıdır. Yan etkiler, bileşenin render sürecinin dışında gerçekleşen işlemleri ifade eder ve genellikle veri çekme, API çağrıları, abonelikler, zamanlayıcılar veya DOM manipülasyonu gibi görevleri kapsar. useEffect, React’in bileşen yaşam döngüsü kavramını fonksiyonel bileşenler için modern ve sade bir şekilde sunar.
useEffect’in önemi, bileşenin durumuna (state) veya özelliklerine (props) bağlı olarak gerçekleştirilmesi gereken işlemleri kontrollü bir şekilde yönetebilmesinden gelir. Bu Hook, bileşen her render edildiğinde veya belirlenen bağımlılıklar değiştiğinde tetiklenir, bu sayede gereksiz render ve yan etkilerin önüne geçilir.
React’te bileşen tabanlı düşünce, veri akışı (data flow) ve durum yönetimi (state management) konuları, useEffect kullanımıyla doğrudan ilişkilidir. Geliştirici, useEffect ile bileşenin yaşam döngüsünü yönetmeyi öğrenir; örneğin bir veri çekme işlemini mount sırasında başlatabilir ve bileşen unmount olduğunda temizleyebilir. Modern tek sayfa uygulamalarında (SPA) useEffect, performans optimizasyonu ve kullanıcı deneyimi açısından kritik bir rol oynar.
Bu eğitimde okuyucu, useEffect’in temel kullanımını, bağımlılık dizileriyle yönetimini, temizleme (cleanup) fonksiyonlarını ve gerçek dünya uygulamalarında karşılaşılabilecek en iyi pratikleri öğrenmiş olacak.
Temel Örnek
jsximport React, { useState, useEffect } from "react";
function Sayaç() {
const [sayaç, setSayaç] = useState(0);
useEffect(() => {
document.title = `Sayaç: ${sayaç}`;
console.log("useEffect çalıştı: document.title güncellendi");
}, [sayaç]);
return (
<div style={{ textAlign: "center", marginTop: "50px" }}> <h1>Sayaç: {sayaç}</h1>
<button onClick={() => setSayaç(sayaç + 1)}>Arttır</button> </div>
);
}
export default Sayaç;Bu örnekte, fonksiyonel bir bileşen olan Sayaç oluşturulmuştur. useState ile sayaç durumu yönetilirken, useEffect kullanılarak document.title her sayaç değişiminde güncelleniyor. useEffect’e ikinci parametre olarak verdiğimiz bağımlılık dizisi ([sayaç]), etkinin yalnızca sayaç değiştiğinde çalışmasını sağlar; bu, gereksiz render ve yan etkileri engeller.
Bağımlılık dizisi verilmezse useEffect her render sonrası çalışır. Boş bir dizi ([]) verilirse, efekt sadece bileşen mount olduğunda çalışır, yani componentDidMount eşdeğeri olur. Bu yapı, API çağrıları, abonelikler ve DOM manipülasyonları gibi operasyonlar için idealdir.
Gerçek projelerde useEffect’in doğru kullanımı, performansın korunması ve bellek sızıntılarının önlenmesi açısından kritik öneme sahiptir. Ayrıca, bağımlılıkları doğru belirlemek ve cleanup fonksiyonları ile efekti sonlandırmak, hataları ve gereksiz render döngülerini önler.
Pratik Örnek
jsximport React, { useState, useEffect } from "react";
function KullanıcıListesi() {
const [kullanicilar, setKullanicilar] = useState([]);
const [yükleniyor, setYükleniyor] = useState(true);
const [hata, setHata] = useState(null);
useEffect(() => {
let iptal = false;
async function veriGetir() {
try {
const cevap = await fetch("https://jsonplaceholder.typicode.com/users");
if (!cevap.ok) throw new Error("Veri alınamadı");
const data = await cevap.json();
if (!iptal) {
setKullanicilar(data);
setYükleniyor(false);
}
} catch (err) {
if (!iptal) {
setHata(err.message);
setYükleniyor(false);
}
}
}
veriGetir();
return () => {
iptal = true;
console.log("useEffect cleanup: bileşen unmount edildi");
};
}, []);
if (yükleniyor) return <p>Yükleniyor...</p>;
if (hata) return <p>Hata: {hata}</p>;
return (
<div style={{ padding: "20px" }}> <h2>Kullanıcı Listesi</h2> <ul>
{kullanicilar.map((kullanici) => ( <li key={kullanici.id}>{kullanici.name}</li>
))} </ul> </div>
);
}
export default KullanıcıListesi;Bu örnekte, gerçek dünya senaryolarına uygun bir kullanım gösterilmektedir. KullanıcıListesi bileşeni API çağrısı yaparak kullanıcıları çekiyor ve yüklenme ile hata durumlarını ayrı state’lerde yönetiyor. Cleanup fonksiyonu ile iptal bayrağı kullanılarak, bileşen unmount olduğunda setState çağrıları engelleniyor; bu, bellek sızıntılarını ve hataları önler.
React best practices gereği, state’in doğru yönetimi ve bağımlılık dizilerinin kontrolü, performans ve veri tutarlılığı açısından kritik öneme sahiptir. Prop drilling ve gereksiz render’lar önlenerek bileşenler daha optimize ve sürdürülebilir hale gelir.
📊 Referans Tablosu
| React Element/Concept | Description | Usage Example |
|---|---|---|
| useEffect | Yan etkileri yönetir ve state ile senkronize eder | useEffect(() => { console.log("Render") }, []) |
| Bağımlılık Dizisi | Efektin hangi durum değişimlerinde tetikleneceğini belirler | useEffect(() => {...}, [sayaç]) |
| Cleanup Fonksiyonu | Bileşen unmount veya bağımlılık değişiminde temizleme | return () => { console.log("Cleanup") } |
| API Çağrısı | useEffect ile veri çekme ve durum güncelleme | useEffect(() => { fetchData() }, []) |
| Hata Yönetimi | useEffect içinde hataları yakalamak | try { ... } catch(e) { setHata(e.message) } |
| Performans Optimizasyonu | Gereksiz render’ları önlemek | useEffect(() => {...}, [propA, stateB]) |
useEffect Hook, React fonksiyonel bileşenlerinde yan etkileri yönetmenin en etkili yoludur. Bileşen yaşam döngüsünü kontrol etmek, API çağrılarını yönetmek ve performansı optimize etmek için vazgeçilmez bir araçtır.
Kapsamlı bir şekilde useEffect’i öğrenmek, geliştiricilerin bileşenleri daha öngörülebilir, sürdürülebilir ve yüksek performanslı şekilde yazmasına olanak sağlar. Sonraki adımlar olarak useMemo, useCallback ve useReducer gibi diğer Hooks ve Context API ile veri yönetimi konuları çalışılabilir. useEffect’in doğru uygulanması, modern React uygulamalarının temel taşlarından biridir.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek