useToggle
- React kursu
- Orta seviye
- Ders 2/80
- 4 dk
Bir boolean state'i yöneten useToggle hook'unu yazmayı öğrenirsin.
useToggle
useToggle, en sık yazılan custom hook'lardan biridir. Bir boolean state ve onu tersine çeviren bir fonksiyon döndürür. Açılır menüler, modallar, onay kutuları için idealdir.
Yapı: const [on, setOn] = useState(false); const toggle = () => setOn(o => !o); return [on, toggle];. Dizi döndürmek, çağıran bileşenin isimleri serbestçe seçmesine izin verir.
Bu desen, useState'in sınırlı bir çeşididir: yalnızca iki değer (true/false) arasında geçiş yapar. Birden çok bileşende kullanılınca büyük kolaylık sağlar.
Dizi dönüş sebebi
Custom hook'lar genellikle dizi döndürür, çünkü dizi elemanlarına istediğin ismi verebilirsin: const [visible, toggleVisible] = useToggle();. Obje döndürsen isimler sabit kalırdı.
İkiden az veya çok değer döndürmek de kolaydır: return [count, increment, decrement, reset];. Bileşen ihtiyacı olanları alır, gerisini yok sayar.
Bu esneklik, custom hook'ları React'in kendi hook'ları (useState, useReducer) ile aynı stile koyar. Tutarlılık öğrenmeyi kolaylaştırır.
Uygulama useToggle yaz
Aşağıdaki iskeleti tamamla. useToggle hook'u yaz. useState(false) ile on state'i tanımla. toggle fonksiyonu () => setOn(o => !o) olsun. [on, toggle] dizisini döndür. Hook'u dışa aktar.
Başlangıç kodu
import { useState } from "react";
// useToggle hook'unu buraya yazÖrnek çözüm
import { useState } from "react";
function useToggle() {
const [on, setOn] = useState(false);
const toggle = () => setOn((o) => !o);
return [on, toggle];
}
export default useToggle;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useToggle ne döndürür?
- Obje
- Tek değer
- Dizi: [value, toggle] Doğru cevap
- Fonksiyon
Açıklama: useToggle [value, toggle] dizisi döndürür.
2 Toggle işlemi
Toggle fonksiyonu, değeri ____ ile tersine çevirir.Toggle fonksiyonu, değeri ! o ile tersine çevirir.Açıklama: ! o ile tersine çevrilir.
3 useToggle parçalarını eşleştir
| Kavram | Anlamı |
|---|---|
useState(false) |
İlk değer |
toggle |
Tersine çevirir |
return [on, toggle] |
Dizi |
! o |
Yöntem |