Bağımlılık dizisi

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.

Örnek çözümü göster

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;

Kendini test et

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
Cevabı göster

Sadece ilk render'da — Boş dizi effect'i ilk render'da bir kez çalıştırır.

Bağımlılık dizisi: eksik parçayı tamamla

useEffect(() => { fetch(url); }, [____])

Cevabı göster

useEffect(() => { fetch(url); }, [url])

Bağımlılık dizisi: kavramları eşleştir

[]

İlk render
[count]

count değişince
dizi yok

Her render
[url, page]

Çoklu bağımlılık

Sıradaki ders: Temizlik fonksiyonu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler