useCounter
- React Native kursu
- Orta seviye
- Ders 9/116
- 5 dk
useCounter özel hook'unu öğrenirsin.
useCounter nedir?
useCounter bir sayacı yöneten özel hook'tür. İçinde useState ile sayı tutar; increment ve reset fonksiyonlarını döndürür. const [count, increment, reset] = useCounter(0) ile çağrılır.
Bu hook tekrar tekrar yazılan sayaç mantığını tek yerde toplar. Artır miktarını parametre olarak verebilirsin: increment(5) beşer beşer artırır. Sıfırlama reset() ile başlangıç değerine döner. Birden çok ekranda sayaç kullanıyorsan useCounter hem tutarlılık hem de kısalık sağlar.
useCounter kullanımı
Bir bileşende const [count, increment, reset] = useCounter(0) yazarsın. Butonlara basıldığında ilgili fonksiyonu çağırırsın; count her seferinde güncellenir ve arayüz yeniden render edilir.
İlk değer parametreden gelir; farklı ekranlar farklı başlangıç değeri verebilir. increment'e argüman vermek de mümkündür: increment(5) beşer beşer artırır. Bu esneklik useCounter'ı gerçek dünyada çok kullanışlı kılar; özellikle alışveriş sepeti, skor ve oyun uygulamalarında.
Uygulama useCounter'ı yaz
useCounter özel hook'unu yaz. useState ile count tut (ilk değer initial). increment fonksiyonu count + n ile artırsın (n varsayılan 1). 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 useCounter parçaları
| Kavram | Anlamı |
|---|---|
increment |
Sayıyı artırır |
reset |
Başlangıca döner |
count |
Tutulan sayı |
initial |
İlk değer |
2 increment gövdesini tamamla
function useCounter(initial) {
const [count, setCount] = useState(initial);
const increment = (n = 1) => setCount(____);
return [count, increment];
}function useCounter(initial) {
const [count, setCount] = useState(initial);
const increment = (n = 1) => setCount(count + n);
return [count, increment];
}Açıklama: count + n verilen miktar kadar artırır.
3 useCounter'dan ne döner?
const [count, increment] = useCounter(0);- Sayı ve artırma fonksiyonu Doğru cevap
- Yalnızca artırma fonksiyonu
- Hiçbir şey
- Yalnızca sayı
Açıklama: useCounter sayı ve artırma fonksiyonu döndürür.