useToggle
- React Native kursu
- Orta seviye
- Ders 8/116
- 5 dk
useToggle özel hook'unu yazmayı öğrenirsin.
useToggle nedir?
useToggle bir boolean değeri açıp kapatmak için kullanılan özel hook'tur. İçinde useState tutar ve toggle fonksiyonu döndürür. toggle çağrıldığında değer true ise false, false ise true olur.
Yaygın kullanım: menü aç/kapa, modal göster/gizle, detay genişlet/daralt. const [isOpen, toggle] = useToggle(false) yazarak başlatırsın. Butonun onPress'ine toggle verirsin; böylece her basışta değer döner. Bu desen hem kodu kısaltır hem de tutarlılık sağlar.
useToggle kullanımı
Bir bileşende useToggle'ı çağırırken yıkım kullanırsın. const [isVisible, toggle] = useToggle(false) yazarsın; isVisible state, toggle ise onu tersine çeviren fonksiyondur.
Butona basıldığında toggle'ı çağırırsın; isVisible her seferinde tersine döner. Açık ise kapanır, kapalı ise açılır. İlk değer false yerine true de verebilirsin; bu yalnızca başlangıç durumunu belirler. useToggle tekrar tekrar yazılan setOpen(!open) mantığını tek bir hook'ta toplar.
Uygulama useToggle'ı yaz
useToggle özel hook'unu yaz. useState ile value state'i tut (ilk değer initial parametresi). 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];
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Toggle mantığını tamamla
function useToggle(initial) {
const [value, setValue] = useState(initial);
const toggle = () => setValue(____);
return [value, toggle];
}function useToggle(initial) {
const [value, setValue] = useState(initial);
const toggle = () => setValue(!value);
return [value, toggle];
}Açıklama: !value her seferinde tersini alır.
2 useToggle ne döndürür?
const [isOpen, toggle] = useToggle(false);- Yalnızca değeri
- Yalnızca fonksiyonu
- Hiçbir şey
- Değeri ve toggle fonksiyonu Doğru cevap
Açıklama: useToggle değer ve toggle fonksiyonu döndürür.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
useToggle |
Boolean aç/kapa |
useState |
State tutar |
toggle |
Değeri ters çevirir |
initial |
Başlangıç değeri |