Özet - İleri custom hook'lar
- React kursu
- Orta seviye
- Ders 8/80
- 5 dk
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 <p>Yükleniyor</p>, error ise <p>Hata</p>, değilse <p>{ '{ data.length }' } öğe</p> göster. Dışa aktar.
Başlangıç kodu
// DataPage bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangi hook arama kutusu için ideal?
- useDebounce Doğru cevap
- usePrevious
- useToggle
- useCounter
Açıklama: useDebounce arama kutuları için ideal.
2 Üç hook'u eşleştir
| Kavram | Anlamı |
|---|---|
useLocalStorage |
Kalıcı |
useFetch |
Veri |
useDebounce |
Gecikme |
useEffect |
Yan etki |