Özet - Özel hook'lar
- React Native kursu
- Orta seviye
- Ders 12/116
- 5 dk
useToggle, useCounter ve usePrevious'ı birleştirerek bir hook kütüphanesi yazarsın.
Özet - Özel hook'lar
Bu grupta özel hook yazmayı öğrendin. useToggle bir boolean'ı açıp kapar, useCounter sayıyı artırıp azaltır, usePrevious değerin bir önceki halini verir. Hook kompozisyonu ile bunları tek bir hook'ta birleştirirsin.
Şimdi bu üç hook'u bir kütüphane gibi yan yana yazacaksın. Her biri tek dosyada durduğunda istediğin bileşene içe aktarılır. Bu denge hem sade hem de ölçeklenebilir bir kod tabanı sağlar; gerçek uygulamalarda karşılaşacağın bir desendir.
Uygulama useToggle'ı yaz
useToggle özel hook'unu yaz. useState ile value tut (ilk değer initial). toggle fonksiyonu !value atar. Hook [value, toggle] döndürsün.
Başlangıç kodu
// useState'i içe aktar
// useToggle özel hook'unu yaz
// value state'i initial ile başlat
// toggle !value atar
// [value, toggle] döndürÖrnek çözüm
import { useState } from "react";
function useToggle(initial) {
const [value, setValue] = useState(initial);
const toggle = () => setValue(!value);
return [value, toggle];
}Uygulama useCounter'ı yaz
useCounter özel hook'unu yaz. useState ile count tut (ilk değer initial). increment fonksiyonu n (varsayılan 1) kadar artırsın. Hook [count, increment] döndürsün.
Başlangıç kodu
// useState'i içe aktar
// useCounter özel hook'unu yaz
// count state'i initial ile başlat
// increment fonksiyonu n kadar artırsın
// [count, increment] döndürÖrnek çözüm
import { useState } from "react";
function useCounter(initial) {
const [count, setCount] = useState(initial);
const increment = (n = 1) => setCount(count + n);
return [count, increment];
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 usePrevious ne tutar?
const prev = usePrevious(count);- Sıradaki render değerini
- İlk değeri sonsuza dek
- Mevcut render değerini
- Bir önceki render değerini Doğru cevap
Açıklama: usePrevious bir önceki render değerini tutar.
2 Hook'u rolüne eşle
| Kavram | Anlamı |
|---|---|
useToggle |
Aç/kapa |
useCounter |
Artır/azalt |
usePrevious |
Eski değer |
useRef |
Mutable referans |
3 Hook adını tamamla
function ____(initial) {
const [count, setCount] = useState(initial);
return [count, setCount];
}function useCounter(initial) {
const [count, setCount] = useState(initial);
return [count, setCount];
}Açıklama: Hook adı useCounter olur.