Dependency array

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.

Örnek çözümü göster

import { useEffect } from "react";
import { Text } from "react-native";

function Logger() {
  useEffect(() => {
    console.log("Başladı");
  }, []);
  return <Text>Günlük</Text>;
}

Kendini test et

Boş diziyi tamamla

useEffect(() => {
  console.log("Mount");
}, ____);

Cevabı göster

useEffect(() => {
  console.log("Mount");
}, []);

Bu efekt ne zaman çalışır?
```
useEffect(() => {
  saveProfile(profile);
}, [profile]);
```
- Yalnızca mount'ta
- profile değiştiğinde
- Hiçbir zaman
- Her render'da
Cevabı göster

profile değiştiğinde — Dolu dizi profile değişince yeniden çalıştırır.
Davranışı senaryoya eşle

Dizi yok

Her render'da
[]

Yalnızca mount'ta
[a, b]

a veya b değiştiğinde
useEffect

Yan etki hook'u

Sıradaki ders: Cleanup

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler