Bileşen Yaşam Döngüsü
Bileşen Yaşam Döngüsü, React’te bir bileşenin yaratılmasından DOM’dan kaldırılmasına kadar geçen tüm süreçleri ifade eder. Bu kavram, bileşenlerin ne zaman oluşturulduğunu, güncellendiğini ve yok edildiğini anlamamızı sağlar. React uygulamalarında performans optimizasyonu, veri akışı kontrolü ve yan etkilerin yönetimi açısından Bileşen Yaşam Döngüsü kritik bir rol oynar.
React’te yaşam döngüsü genellikle üç temel aşamaya ayrılır: Montaj (Mounting), Güncelleme (Updating) ve Kaldırma (Unmounting). Fonksiyonel bileşenlerde, useEffect hook’u bu yaşam döngüsü davranışlarını yönetmek için kullanılır ve class bileşenlerdeki componentDidMount, componentDidUpdate ve componentWillUnmount metodlarının yerini alır. Bu eğitimde, okurlar bileşenlerin yaşam döngüsünü yönetmeyi, state ve props akışını kontrol etmeyi, gereksiz render’lardan kaçınmayı ve prop drilling gibi yaygın hatalardan nasıl kaçınacaklarını öğrenecekler. Modern tek sayfa uygulamalarında (SPA) bu bilgiler, kullanıcı deneyimini iyileştirmek ve uygulamanın verimliliğini artırmak için kritik öneme sahiptir.
Temel Örnek
jsximport React, { useState, useEffect } from 'react';
function Sayaç() {
const [count, setCount] = useState(0);
// Montaj ve Kaldırma
useEffect(() => {
console.log('Bileşen monte edildi');
return () => {
console.log('Bileşen kaldırıldı');
};
}, []);
// Güncelleme
useEffect(() => {
console.log(`count değeri değişti: ${count}`);
}, [count]);
const artır = () => setCount(prev => prev + 1);
const azalt = () => setCount(prev => prev - 1);
return ( <div> <h2>Basit Sayaç</h2> <p>Mevcut değer: {count}</p> <button onClick={artır}>Artır</button> <button onClick={azalt}>Azalt</button> </div>
);
}
export default Sayaç;Bu örnekte, Sayaç bileşeni React yaşam döngüsünü göstermektedir. useState ile state yönetimi sağlanır ve count değeri kontrol edilir. İlk useEffect, boş bağımlılık dizisiyle çalışarak componentDidMount ve componentWillUnmount davranışını taklit eder. İkinci useEffect, count değiştiğinde çalışarak componentDidUpdate işlevini yerine getirir.
Bu yaklaşım, yan etkilerin yönetimi, state’in immutability ile güncellenmesi ve gereksiz render’ların önlenmesi açısından ileri seviye bir uygulama sunar. Ayrıca, bu yapı API çağrıları, veri senkronizasyonu ve kompleks veri akışları için de uygun bir temel sağlar.
Pratik Örnek
jsximport React, { useState, useEffect } from 'react';
function GörevUygulaması() {
const [görevler, setGörevler] = useState([]);
const [yeniGörev, setYeniGörev] = useState('');
// Montajda veri yükleme
useEffect(() => {
const fetchGörevler = async () => {
try {
const response = await fetch('[https://jsonplaceholder.typicode.com/todos?_limit=5](https://jsonplaceholder.typicode.com/todos?_limit=5)');
const data = await response.json();
setGörevler(data);
} catch (error) {
console.error('Görevler yüklenirken hata oluştu:', error);
}
};
fetchGörevler();
}, []);
const görevEkle = () => {
if (!yeniGörev.trim()) return;
setGörevler(prev => [...prev, { id: Date.now(), title: yeniGörev }]);
setYeniGörev('');
};
const görevSil = id => setGörevler(prev => prev.filter(g => g.id !== id));
return ( <div> <h2>Görev Uygulaması</h2>
<input
type="text"
value={yeniGörev}
onChange={e => setYeniGörev(e.target.value)}
placeholder="Görev ekle"
/> <button onClick={görevEkle}>Ekle</button> <ul>
{görevler.map(g => ( <li key={g.id}>
{g.title}
<button onClick={() => görevSil(g.id)}>Sil</button> </li>
))} </ul> </div>
);
}
export default GörevUygulaması;Bu pratik örnek, yaşam döngüsünün gerçek dünya uygulamalarında nasıl kullanıldığını gösterir. useEffect, montajda görev verilerini API’den yükler ve hata yönetimi try/catch ile sağlanır. State immutably güncellenir ve liste elemanlarına unique key atanır, böylece gereksiz render’lar önlenir. Bu yöntem, veri akışı ve yan etkilerin kontrolünü kolaylaştırarak performanslı ve sürdürülebilir bileşenler oluşturmayı sağlar.
En iyi uygulamalar arasında, yan etkilerin doğru yönetimi, state’in immutability ile güncellenmesi ve gereksiz render’lardan kaçınmak yer alır. Listelerde unique key kullanımı DOM reconciliation’ı optimize eder. Asenkron işlemler için hata yönetimi ve prop drilling’i önlemek için Context API veya Redux kullanımı önerilir.
Yaygın hatalar: state’in doğrudan değiştirilmesi, useEffect bağımlılıklarının yanlış kullanımı ve gereksiz render’lar. Optimizasyon teknikleri: React.memo, useCallback ve lazy loading. Güvenlik önlemleri: iş mantığı ve UI ayrımı, JSX injection önleme ve veri doğrulama. Bu yöntemlerle React uygulamaları hızlı, güvenli ve sürdürülebilir olur.
📊 Referans Tablosu
| React Element/Concept | Description | Usage Example |
|---|---|---|
| useState | Bileşenin iç state’ini yönetir | const [count, setCount] = useState(0); |
| useEffect | Yan etkileri ve yaşam döngüsünü yönetir | useEffect(() => { console.log(count); }, [count]); |
| Mounting | Bileşen DOM’a monte edildiğinde çalışır | useEffect(() => { console.log('Montaj'); }, []); |
| Updating | State veya props değiştiğinde çalışır | useEffect(() => { console.log('Güncelleme'); }, [propsOrState]); |
| Unmounting | Bileşen DOM’dan kaldırılırken çalışır | useEffect(() => { return () => console.log('Kaldırma'); }, []); |
Bileşen yaşam döngüsü, bileşenlerin oluşturulması, güncellenmesi ve kaldırılmasını yöneterek performans ve yeniden kullanılabilirlik sağlar. Bu bilgiyi öğrendikten sonra, Redux veya Context API ile gelişmiş state yönetimi, React.memo ve useCallback ile optimizasyon ve büyük SPA projelerinde yaşam döngüsünü yönetme konularına geçmek faydalı olur. Sürekli pratik ve resmi dokümantasyon ile bilgi pekiştirilmelidir.
🧠 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