useToggle

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.

Örnek çözümü göster

import { useState } from "react";

function useToggle() {
  const [on, setOn] = useState(false);
  const toggle = () => setOn((o) => !o);
  return [on, toggle];
}

export default useToggle;

Kendini test et

useToggle ne döndürür?
- Obje
- Tek değer
- Dizi: [value, toggle]
- Fonksiyon
Cevabı göster

Dizi: [value, toggle] — useToggle [value, toggle] dizisi döndürür.

Toggle işlemi

Toggle fonksiyonu, değeri ____ ile tersine çevirir.

Cevabı göster

Toggle fonksiyonu, değeri ! o ile tersine çevirir.

useToggle parçalarını eşleştir

useState(false)

İlk değer
toggle

Tersine çevirir
return [on, toggle]

Dizi
! o

Yöntem

Sıradaki ders: usePrevious

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler