Özel hook'lar nedir ve bir tane nasıl yazarsınız?

Question

Accepted Answer

**Custom hook**, adı `use` ile başlayan ve diğer hook'ları çağırarak **durum içeren mantığı paketlemek ve yeniden kullanmak** için bir fonksiyondur — bileşen ağacınızı değiştirmeden (HOC'ler veya render props'tan farklı olarak). ```jsx // extract "fetch + loading + error" logic once, reuse everywhere function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const ctrl = new AbortController(); setLoading(true); fetch(url, { signal: ctrl.signal }) .then(r => r.json()) .then(setData) .catch(e => { if (e.name !== "AbortError") setError(e); }) .finally(() => setLoading(false)); return () => ctrl.abort(); }, [url]); return { data, loading, error }; } // usage — the component stays declarative: function Profile({ id }) { const { data, loading, error } = useFetch(`/api/users/${id}`); if (loading) return ; return

{data.name}

; } ``` ## Önemli özellikler - **Hooks Kuralları**'nı takip eder (en üst seviyede çağırın; yalnızca bileşenler/hook'lardan). - **State her çağrı başına izole edilir.** `useFetch` kullanan iki bileşen her birinin kendi bağımsız state'ini alır — hook'u paylaşmak veriyi *paylaşmaz*. - Kural gereği: bunu `useX` olarak adlandırın ve state + fonksiyonları döndürün (genellikle bir array veya object). ## Neden önemli Özel hook'lar, modern React'te mantığı paylaşmanın (veri getirme, formlar, abonelikler, medya sorguları) idiyomatik yoludur ve bileşenleri küçük tutarken mantığı yalıtımda test edilebilir hale getirir.