Bağımlılık dizisi
- React kursu
- Başlangıç
- Ders 66/84
- 4 dk
Bağımlılık dizisinin ne zaman çalıştırılacağını kontrol ettiğini öğrenirsin.
Bağımlılık dizisi
useEffect'in ikinci argümanı bir bağımlılık dizisidir: useEffect(fn, [count]). Effect, yalnızca bu dizideki değerler değişince çalışır.
Boş dizi [] effect'i yalnızca ilk render'da çalıştırır. Dizi yoksa her render'da çalışır. Bu kontrol, gereksiz çalışmaları önler.
Bağımlılık olarak effect içinde kullandın tüm dış değerleri yazmalısın; aksi halde eski değer kalır.
Üç çalışma modu
useEffect'in üç modu var: dizi yok (her render), boş dizi (ilk render), dolu dizi (değişince). Hangisini seçeceğin effect'in amacına bağlıdır.
Bağımlılıkları unutmak yaygın bir hatadır; dış değerler her zaman yazılmalı. Eksik bağımlılık uyarısı için eslint-plugin-react-hooks kullanılır.
Doğru bağımlılık dizisi, effect'in doğru zamanda çalışmasını sağlar.
Uygulama Bağımlılıklı effect
Aşağıdaki iskeleti tamamla. Counter bileşeni yaz; useState ve useEffect'i içe aktar. const [count, setCount] = useState(0); tanımla. useEffect(() => { document.title = String(count); }, [count]); çağır. <button onClick={() => setCount(count + 1)}>{count}</button> döndür. Dışa aktar.
Başlangıç kodu
import { useState, useEffect } from "react";
// Counter bileşenini buraya tanımlaÖrnek çözüm
import { useState, useEffect } from "react";
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => { document.title = String(count); }, [count]);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
export default Counter;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useEffect(fn, []) ne zaman çalışır?
An empty array means "no dependencies".- Her render'da
- Sadece unmount'ta
- Hiçbir zaman
- Sadece ilk render'da Doğru cevap
Açıklama: Boş dizi effect'i ilk render'da bir kez çalıştırır.
2 Bağımlılık dizisi: eksik parçayı tamamla
useEffect(() => { fetch(url); }, [____])useEffect(() => { fetch(url); }, [url])Açıklama: url değişince effect yeniden çalışır.
3 Bağımlılık dizisi: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
[] |
İlk render |
[count] |
count değişince |
dizi yok |
Her render |
[url, page] |
Çoklu bağımlılık |