Özel hook
- React Native kursu
- Orta seviye
- Ders 7/116
- 5 dk
Ö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.
Başlangıç kodu
// useState'i içe aktar
// useGreeting özel hook'unu yaz
// useState ile name state'i tut
// [name, setName] döndürÖrnek çözüm
import { useState } from "react";
function useGreeting() {
const [name, setName] = useState("misafir");
return [name, setName];
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Özel hook adı neyle başlamalı?
function useToggle(initial) { /* ... */ }- handle
- with
- use Doğru cevap
- on
Açıklama: Özel hook adı use ile başlar.
2 Hook adını tamamla
function ____(initial) {
const [value, setValue] = useState(initial);
return [value, setValue];
}function useToggle(initial) {
const [value, setValue] = useState(initial);
return [value, setValue];
}Açıklama: Özel hook adı use ön ekiyle başlar.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
useToggle |
Özel hook adı |
useState |
State tutar |
return [v, setV] |
Değeri döndürür |
use ön eki |
Hook belirtisi |