Özel Hook'lar: Yeniden Kullanılabilir Mantığı Çıkarma
Durum içeren mantığı use ile başlayan özel use* işlevlerine taşıyarak kodu yinelemeden veya durumu yukarı taşımadan davranışı bileşenler arasında paylaşın.
Özel Hook'lar: Yeniden Kullanılabilir Mantığı Çıkarma, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Özel Kancalar Nedir
Özel kanca, adı use ile başlayan ve dahili olarak başka kancaları çağıran bir JavaScript işlevidir. Özel kancalar, durum bilgisi taşıyan mantığı çıkararak birden çok bileşenin bunu kopyala-yapıştır yapmadan paylaşmasını sağlar.
Mantığı Özel Kancaya Çıkarma
Bileşenler arasında yinelenen mantığı (veri alma + yükleniyor durumu + hata, pencere boyutu, localStorage) belirleyin ve bunu özel bir kancaya taşıyın.
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handler = () => setWidth(window.innerWidth);
window.addEventListener('resize', handler);
return () => window.removeEventListener('resize', handler);
}, []);
return width;
}
// Usage:
const width = useWindowWidth();
const isMobile = width < 768;useFetch — Veri Alma Kancası
Herhangi bir bileşenin bir URL'den veri yüklemek için kullanabileceği yeniden kullanılabilir bir veri alma kancası.
function useFetch<T>(url: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const controller = new AbortController();
async function load() {
try {
const res = await fetch(url, { signal: controller.signal });
if (!res.ok) throw new Error(`${res.status}`);
setData(await res.json());
} catch (err) {
if ((err as DOMException).name !== 'AbortError')
setError((err as Error).message);
} finally { setLoading(false); }
}
load();
return () => controller.abort();
}, [url]);
return { data, loading, error };
}useLocalStorage Kancası
Bir değeri localStorage ile eşitleyen ve storage olayı aracılığıyla sekmeler arasında eşit kalmasını sağlayan özel bir kanca.
function useLocalStorage<T>(key: string, initialValue: T) {
const [value, setValue] = useState<T>(() => {
const stored = localStorage.getItem(key);
return stored ? JSON.parse(stored) : initialValue;
});
const set = useCallback((newValue: T) => {
setValue(newValue);
localStorage.setItem(key, JSON.stringify(newValue));
}, [key]);
return [value, set] as const;
}Özel Kancalar Mantığı Paylaşır, Durumu Değil
Özel bir kancayı çağıran her bileşen, kendine ait bağımsız bir durum elde eder. Kancalar tekil örnekler değildir — yalıtılmış durum örnekleri oluşturan işlev çağrılarıdır.
Adlandırma Kuralları
Özel kanca adları use ile başlamalıdır. Bu kural, kancaların üst düzeyde ve doğru sırada çağrılmasını sağlayan ESLint react-hooks lint kuralları tarafından uygulanır.
Birden Çok Değer Döndürme
Özel kancalar genellikle bir nesne (adlandırılmış değerler) veya bir demet (useState gibi) döndürür. Demetler, özel adlarla yapı bozmayı mümkün kılar; nesneler ise kendilerini açıklar.
// Tuple (like useState):
const [value, setValue] = useLocalStorage('key', 0);
// Object (more descriptive):
const { data, loading, error, refetch } = useFetch('/api/users');useDebounce Kancası
Bir değeri gecikmeli güncelleyin: değeri yalnızca kullanıcı belirli bir gecikme süresi boyunca yazmayı bıraktıktan sonra güncelleyin.
function useDebounce<T>(value: T, delay: number): T {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const timer = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debounced;
}
// Usage:
const debouncedSearch = useDebounce(searchTerm, 300);
useEffect(() => { search(debouncedSearch); }, [debouncedSearch]);useMediaQuery Kancası
CSS medya sorgusu sonuçlarını tepkisel olarak okumak için window.matchMedia işlevini bir kancaya sarar.
function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState(() => window.matchMedia(query).matches);
useEffect(() => {
const mq = window.matchMedia(query);
const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
mq.addEventListener('change', handler);
return () => mq.removeEventListener('change', handler);
}, [query]);
return matches;
}Özel Kancaları Sınama
@testing-library/react kitaplığının renderHook() yardımcı programını kullanarak özel kancaları bir bileşene sarmadan yalıtılmış biçimde sınayın.
import { renderHook, act } from '@testing-library/react';
test('useCounter increments', () => {
const { result } = renderHook(() => useCounter(0));
expect(result.current.count).toBe(0);
act(() => result.current.increment());
expect(result.current.count).toBe(1);
});Yayımlanmış Kanca Kitaplıkları
Topluluk kanca kitaplıkları yüzlerce sınanmış kanca sunar: @uidotdev/usehooks, react-use, usehooks-ts. Özel bir kanca yazmadan önce iyi sınanmış bir sürümün zaten mevcut olup olmadığını kontrol edin.
Kısa Kontrol
Özel bir kanca iki farklı bileşen tarafından çağrıldığında, kancanın içindeki duruma ne olur?
Özet: Özel Kancalar
Özel kancalar, yeniden kullanılmak üzere durum bilgisi taşıyan mantığı çıkarır. Adlarını use ön ekiyle oluşturun. Kancayı çağıran her bileşen bağımsız bir durum elde eder. Nesneler veya demetler döndürün. Yaygın desenler: useFetch, useLocalStorage, useDebounce, useMediaQuery. renderHook() ile sınayın. Sıfırdan yazmadan önce topluluk kitaplıklarını kontrol edin.
Sıkça Sorulan Sorular
“Özel Hook'lar: Yeniden Kullanılabilir Mantığı Çıkarma” dersi ücretsiz mi?
Evet — “Özel Hook'lar: Yeniden Kullanılabilir Mantığı Çıkarma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Özel Hook'lar: Yeniden Kullanılabilir Mantığı Çıkarma” dersinde ne öğreneceğim?
Durum içeren mantığı use ile başlayan özel use* işlevlerine taşıyarak kodu yinelemeden veya durumu yukarı taşımadan davranışı bileşenler arasında paylaşın. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Özel Hook'lar: Yeniden Kullanılabilir Mantığı Çıkarma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Genel Durum için useContext
- Karmaşık Durum için useReducer
- Performans için useMemo ve useCallback
- Özel Hook'lar: Yeniden Kullanılabilir Mantığı Çıkarma