useFetch
- React kursu
- Orta seviye
- Ders 6/80
- 4 dk
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.
Başlangıç kodu
import { useState, useEffect } from "react";
// useFetch hook'unu buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useFetch kaç state döndürür?
- İki
- Dört
- Üç Doğru cevap
- Bir
Açıklama: useFetch üç state döndürür.
2 Yükleme bayrağı
useFetch, ilk çağrıda loading değerini ____ ile başlatır.useFetch, ilk çağrıda loading değerini true ile başlatır.Açıklama: loading başlangıçta true olur.
3 useFetch parçalarını eşleştir
| Kavram | Anlamı |
|---|---|
useState(null) |
data |
useState(true) |
loading |
fetch(url) |
Çağrı |
cancelled |
Temizlik |