Özet - İleri custom hook'lar

useFetch'i useDebounce ile birleştirip arama kutusu yazarsın.

Özet - İleri custom hook'lar

Bu grupta üç güçlü custom hook yazdık: useLocalStorage kalıcı state, useFetch veri çekme, useDebounce ise değişim yavaşlatma için. Üçü de gerçek projelerde günlük kullanılır.

Orak ilke: hook'lar state ve effect'i birleştirir, bileşenlerden karmaşık mantığı çıkarır ve test edilebilir, yeniden kullanılabilir parçalar oluşturur. İç içe hook'larla composable yapılar kurulabilir.

Bir sonraki adımda useFetch ile bir veri sayfası yazacaksın; loading ve error durumlarını yöneteceksin.

Uygulama DataPage ile useFetch

Aşağıdaki iskeleti tamamla. DataPage bileşeni yaz. useFetch("https://api.example.com/items") çağır; [data, loading, error] olarak çöz. loading ise Yükleniyor, error ise Hata, değilse { '{ data.length }' } öğe göster. Dışa aktar.

Örnek çözümü göster

function DataPage() {
  const [data, loading, error] = useFetch("https://api.example.com/items");
  if (loading) return <p>Yükleniyor</p>;
  if (error) return <p>Hata</p>;
  return <p>{data.length} öğe</p>;
}

export default DataPage;

Kendini test et

Hangi hook arama kutusu için ideal?
- useDebounce
- usePrevious
- useToggle
- useCounter
Cevabı göster

useDebounce — useDebounce arama kutuları için ideal.
Üç hook'u eşleştir

useLocalStorage

Kalıcı
useFetch

Veri
useDebounce

Gecikme
useEffect

Yan etki

Sıradaki ders: Context ayrımı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler