Custom hook nedir?
- React kursu
- Orta seviye
- Ders 1/80
- 4 dk
use ile başlayan fonksiyonların tekrar kullanılabilir mantık parçası olduğunu öğrenirsin.
Custom hook nedir?
Bir custom hook, kendi yazdığın ve adı use ile başlayan bir JavaScript fonksiyonudur. İçinde diğer hook'ları (useState, useEffect vb.) çağırabilir ve bileşenler arasında mantık paylaşımı yapabilirsin.
Örneğin birkaç bileşende aynı sayaç mantığını kullanıyorsan, bunu useCounter adında bir hook'a taşıyıp her bileşende çağırırsın. Bu, kopya kodu önler ve bakımı kolaylaştırır.
İlkesi vardır: adı use ile başlamalı ve yalnızca en üst seviyede (döngü, koşul ya da iç içe fonksiyon içinde değil) çağrılmalıdır. Bu ilkeler React'in hook sırasını takip edebilmesi için şarttır.
İki ilke
Custom hook'lar iki katı ilkeye uyar. Birincisi adlandırma: use öneki zorunludur; bu sayede React bunun bir hook olduğunu bilir ve linter'lar da tanır.
İkincisi çağrı yeri: hook'lar yalnızca bileşenin en üst seviyesinde çağrılır. Döngü içinde, if bloğunda ya da iç içe fonksiyonda çağrılmaz. Bu, React'in her render'da aynı sırada hook'ları çağırmasını sağlar.
Bu iki ilkeye uyduğunda, hook'ları güvenle bileşenler arasında paylaşabilirsin. Aksi halde React hook sırasını şaşırır ve hata fırlatır.
Uygulama useCounter iskeleti
Aşağıdaki iskeleti tamamla. useCounter adında bir custom hook yaz. useState(0) ile count ve setCount tanımla. increment adında bir fonksiyon döndür: () => setCount(c => c + 1). Hook'u dışa aktar.
Başlangıç kodu
import { useState } from "react";
// useCounter hook'unu buraya yazÖrnek çözüm
import { useState } from "react";
function useCounter() {
const [count, setCount] = useState(0);
const increment = () => setCount((c) => c + 1);
return increment;
}
export default useCounter;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Custom hook adı ne ile başlar?
- hook
- use Doğru cevap
- custom
- get
Açıklama: Custom hook adları use ile başlar.
2 Mantık paylaşımı
Aynı mantığı birden çok bileşende kullanmak için ____ yazılır.Aynı mantığı birden çok bileşende kullanmak için custom hook yazılır.Açıklama: Custom hook ile mantık paylaşılır.
3 Custom hook kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
use öneki |
Adlandırma |
en üst seviye |
Çağrı yeri |
useState |
İçeride çağrılır |
paylaşım |
Amaç |