React
useFetch
Veri çekme ve yükleme durumunu yöneten useFetch hook'unu yazarsın.
useFetch
useFetch, bir URL'den veri çekip data, loading ve error durumlarını döndüren bir hook'tür. Tekrar tekrar yazılan fetch mantığını tek yerde toplar.
Üç state kullanır: useState(null) ile data, useState(true) ile loading, useState(null) ile error. useEffect içinde fetch(url) çağrılır, dönen promise .then ve .catch ile işlenir.
Temizlik önemli: bileşen kalkarsa AbortController ile fetch durdurulur. Aksi halde state güncellemesi eski bileşene yapılır ve React uyarı verir. Bu derste basit bir cancelled bayrağı kullanıyoruz.
Temizlik bayrağı
Bileşen kalktıktan sonra state güncellemek React'te uyarı verir. Bunu önlemek için let cancelled = false; bayrağı kullanılır; temizlik fonksiyonu cancelled = true yapar.
Promise çözülünce if (!cancelled) setData(...) ile yalnızca hâlâ bağlı bileşenler güncellenir. Bu desen, async işlemlerde React'in önerdiği standart bir yaklaşımdır.
İleri seviyede AbortController ile fetch'i tamamen durdurmak daha temizdir. Ama basit uygulamalarda cancelled bayrağı yeterli ve anlaşılırdır.
Uygulama useFetch iskeleti
Aşağıdaki iskeleti tamamla. useFetch(url) hook'u yaz. Üç state tanımla: data (null), loading (true), error (null). useEffect içinde let cancelled = false; bayrağı ekle, fetch(url).then(r => r.json()).then(d => { if (!cancelled) { setData(d); setLoading(false); } }).catch(e => { if (!cancelled) { setError(e); setLoading(false); } }). Temizlik: () => { cancelled = true; }. Bağımlılık [url]. [data, loading, error] döndür. Hook'u dışa aktar.
Örnek çözümü göster
import { useState, useEffect } from "react";
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
let cancelled = false;
fetch(url)
.then((r) => r.json())
.then((d) => {
if (!cancelled) {
setData(d);
setLoading(false);
}
})
.catch((e) => {
if (!cancelled) {
setError(e);
setLoading(false);
}
});
return () => { cancelled = true; };
}, [url]);
return [data, loading, error];
}
export default useFetch;
Kendini test et
-
useFetch kaç state döndürür?
Cevabı göster
Üç — useFetch üç state döndürür.
-
Yükleme bayrağı
useFetch, ilk çağrıda loading değerini ____ ile başlatır.
Cevabı göster
useFetch, ilk çağrıda loading değerini true ile başlatır.
-
useFetch parçalarını eşleştir
- useState(null)
- data
- useState(true)
- loading
- fetch(url)
- Çağrı
- cancelled
- Temizlik
Sıradaki ders: useDebounce
