Özet - Özel hook'lar

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.

Örnek çözümü göster

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.

Örnek çözümü göster

import { useState } from "react";

function useCounter(initial) {
  const [count, setCount] = useState(initial);
  const increment = (n = 1) => setCount(count + n);
  return [count, increment];
}

Kendini test et

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
Cevabı göster

Bir önceki render değerini — usePrevious bir önceki render değerini tutar.
Hook'u rolüne eşle

useToggle

Aç/kapa
useCounter

Artır/azalt
usePrevious

Eski değer
useRef

Mutable referans

Hook adını tamamla

function ____(initial) {
  const [count, setCount] = useState(initial);
  return [count, setCount];
}

Cevabı göster

function useCounter(initial) {
  const [count, setCount] = useState(initial);
  return [count, setCount];
}

Sıradaki ders: Context nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler