Özet - Custom hook temelleri
- React kursu
- Orta seviye
- Ders 4/80
- 5 dk
Bir form alanı için useField hook'u yazıp iki inputta kullanırsın.
Özet - Custom hook temelleri
Bu grupta custom hook'un ne olduğunu, iki ilkesini, useToggle ve usePrevious örneklerini öğrendin. Artık kendi hook'larını yazabilirsin.
Reçete: use önekiyle adlandır, en üst seviyede çağır, içerde gerekli hook'ları kullan ve anlamlı bir değer döndür. İsimlendirme ve çağrı yeri ilkeleri React'in hook sıralamasını korumasını sağlar.
Bir sonraki adımda useCounter hook'unu kullanarak bir sayfa bileşeni yazacaksın.
Uygulama CounterPage ile useCounter
Aşağıdaki iskeleti tamamla. CounterPage bileşeni yaz. useCounter hook'unu çağırıp sonucunu increment'e ata. <button onClick={ '{ increment }' }>Artır</button> göster. Dışa aktar. (useCounter'ın ithal edildiğini varsay.)
Başlangıç kodu
// CounterPage bileşenini buraya yazÖrnek çözüm
function CounterPage() {
const increment = useCounter();
return <button onClick={increment}>Artır</button>;
}
export default CounterPage;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangisi custom hook adı olabilir?
- useFetch Doğru cevap
- fetchData
- GetUser
- hook_user
Açıklama: useFetch geçerli bir custom hook adıdır.
2 Custom hook reçetesini eşleştir
| Kavram | Anlamı |
|---|---|
use öneki |
Adlandırma |
en üst seviye |
Çağrı |
içeride hook |
Mantık |
return |
Değer |