Dependency array
- React Native kursu
- Orta seviye
- Ders 2/116
- 5 dk
useEffect dependency array'sini öğrenirsin.
Dependency array nedir?
useEffect'in ikinci parametresi dependency array'dir (bağımlılık dizisi). Efektin hangi değişikliklerde yeniden çalışacağını belirler. useEffect(effect, [a, b]) yazdığında efekt yalnızca a veya b değiştiğinde çalışır.
Üç temel durum vardır: dizi yoksa her render'da çalışır; boş dizi [] yalnızca mount'ta çalışır; değer listesi [a, b] bu değerlerden biri değiştiğinde çalışır. Yanlış bağımlılık dizisi gereksiz yeniden çalışmalara ya da eski değeri kullanan hataya yol açar; bu yüzden diziyi dikkatle yazmak gerekir.
Üç davranış
Dependency array'in üç davranışını bilmek gerekir. Dizi yoksa efekt her render'dan sonra çalışır. Boş dizi [] ise efekt yalnızca bir kez, mount'ta çalışır; bu en sık kullanılan desendir.
Dolu dizi [a, b] ise efekt mount'ta ve a veya b değiştiğinde çalışır. Diziye ilkel (sayı, dize, boolean) değerler yazılır; nesne ve dizi her render'da yeni referans olduğundan dikkatli olunmalı. Lint denetimi exhaustive-deps bağımlılıkları doğru yazmana yardım eder.
Uygulama Boş dizi ile mount efekti
Bir Logger bileşeni yaz. useEffect kullanarak "Başladı" mesajını console.log ile yaz. Dependency array'i boş bırak ([]) ki yalnızca mount'ta çalışsın. Bileşen <Text>Günlük</Text> döndürsün.
Başlangıç kodu
// useEffect'i içe aktar
function Logger() {
// useEffect ile "Başladı" yaz; dizi boş olsun
return <Text>Günlük</Text>;
}Örnek çözüm
import { useEffect } from "react";
import { Text } from "react-native";
function Logger() {
useEffect(() => {
console.log("Başladı");
}, []);
return <Text>Günlük</Text>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Boş diziyi tamamla
useEffect(() => {
console.log("Mount");
}, ____);useEffect(() => {
console.log("Mount");
}, []);Açıklama: Boş dizi yalnızca mount'ta çalıştırır.
2 Bu efekt ne zaman çalışır?
useEffect(() => {
saveProfile(profile);
}, [profile]);- Yalnızca mount'ta
- profile değiştiğinde Doğru cevap
- Hiçbir zaman
- Her render'da
Açıklama: Dolu dizi profile değişince yeniden çalıştırır.
3 Davranışı senaryoya eşle
| Kavram | Anlamı |
|---|---|
Dizi yok |
Her render'da |
[] |
Yalnızca mount'ta |
[a, b] |
a veya b değiştiğinde |
useEffect |
Yan etki hook'u |