Junior
React'ta bağımlılık dizisi neden belirtilir?
sobes.tech yapay zeka
AI'dan gelen yanıt
React hook'larındaki (örneğin, useEffect, useMemo, useCallback) bağımlılık dizisi (dependency array), efektin veya memoize edilen fonksiyonun hangi değerlere bağlı olduğunu gösterir.
Kullanımı şunlara olanak tanır:
- Performansı optimize etmek: React, bağımlılık dizisindeki herhangi bir değerin son render'dan bu yana değişip değişmediğine bağlı olarak efekti yeniden çalıştırır veya değeri yeniden hesaplar. Bu, gereksiz hesaplamaları ve güncellemeleri önler.
- Sonsuz döngüleri önlemek: Bağımlılık dizisi olmadan veya yanlış bağımlılık belirtilmişse, efekt her render'da çalışabilir, bu da durum güncellemesine ve tekrar render'a neden olur, böylece sonsuz döngü oluşur. Bağımlılıkların belirtilmesi, efektin yalnızca gerçekten ihtiyaç duyulduğunda çalışmasını sağlar.
- Efektin yaşam döngüsünü kontrol etmek:
- Boş dizi
[]kullanmak, efektin yalnızca ilk render'dan sonra bir kez çalışacağı anlamına gelir (örneğin,componentDidMountgibi). Sonraki render'larda tekrar çalışmaz, bileşenin durumu veya props'ları değişse bile. - Bağımlılık dizisi olmaması veya
undefinedkullanılması, efektin her render'da çalışacağı anlamına gelir.
- Boş dizi
useEffect ile örnek:
// Efekt yalnızca ilk render'dan sonra bir kez çalışır
useEffect(() => {
console.log('Bileşen monte edildi');
}, []);
// Efekt, ilk render'da ve `count` değiştiğinde çalışır
useEffect(() => {
console.log('Count değeri değişti:', count);
}, [count]);
// Efekt her render'da çalışır
useEffect(() => {
console.log('Render gerçekleşti');
});
useMemo ile örnek:
// `a` veya `b` değiştiğinde `expensiveResult` yeniden hesaplanır
const expensiveResult = useMemo(() => {
console.log('Yeniden hesaplanıyor...');
return a * b;
}, [a, b]);
useCallback ile örnek:
// `id` değişmediği sürece `handleClick` yeniden oluşturulmaz
const handleClick = useCallback(() => {
console.log('id:', id, ' olan öğeye tıklandı');
}, [id]);
Bağımlılık dizisinin doğru şekilde belirtilmesi, hook'ların düzgün çalışması ve React uygulamalarının performansı için kritiktir.