Özel hook

Özel hook yazmayı öğrenirsin.

Özel hook nedir?

Özel hook (custom hook) birden çok bileşende paylaşılan state mantığını çıkarmaya yarar. Adı use ile başlar; örneğin useToggle, useCounter. Bu adlandırma bir zorunluluktur; React'in lint araçları bunu kullanır.

Bir özel hook aslında bir fonksiyondur; içinde başka hook'lar çağrılabilir. useState, useEffect gibi hook'ları birleştirerek yeniden kullanılabilir bir mantık parçası yazarsın. Özel hook'lar bileşenlerin karışıklığını azaltır ve test edilebilirliği artırır.

Hook ilkeleri

Özel hook yazarken iki ilkeyi izlemelisin. Birincisi: hook'lar yalnızca bileşenin en üst düzeyinde veya başka bir hook içinde çağrılır; döngü, koşul veya iç içe fonksiyon içinde çağrılmaz. İkincisi: birden çok hook'u aynı sırayla çağır.

Bu ilkeler React'in hook'ları doğru şekilde takip edebilmesi için gerekir. Aksi halde state karışır. Özel hook içinden değer döndürebilirsin: tek değer, dizi veya nesne. return [value, setValue] deseni yaygındır; böylece çağıran bileşen const [v, setV] = useMyHook() yıkımı yapar.

Uygulama İlk özel hook

Bir useGreeting adında özel hook yaz. İçinde useState ile bir name state'i tut (ilk değer "misafir"). Hook [name, setName] dizisi döndürsün.

Örnek çözümü göster

import { useState } from "react";

function useGreeting() {
  const [name, setName] = useState("misafir");
  return [name, setName];
}

Kendini test et

Özel hook adı neyle başlamalı?
```
function useToggle(initial) { /* ... */ }
```
- handle
- with
- use
- on
Cevabı göster

use — Özel hook adı use ile başlar.

Hook adını tamamla

function ____(initial) {
  const [value, setValue] = useState(initial);
  return [value, setValue];
}

Cevabı göster

function useToggle(initial) {
  const [value, setValue] = useState(initial);
  return [value, setValue];
}

Parçayı rolüne eşle

useToggle

Özel hook adı
useState

State tutar
return [v, setV]

Değeri döndürür
use ön eki

Hook belirtisi

Sıradaki ders: useToggle

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler