ما هي الـ custom hooks وكيف تكتب واحدة؟

Question

Accepted Answer

**custom hook** هي دالة اسمها يبدأ بـ `use` وتستدعي hooks أخرى لـ **تعبئة وإعادة استخدام الـ stateful logic** — بدون تغيير شجرة المكونات الخاصة بك (على عكس HOCs أو render props). ```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}

; } ``` ## الخصائص المهمة - تتبع **Rules of Hooks** (استدعاء في المستوى الأعلى؛ فقط من المكونات/hooks). - **الـ State معزول لكل استدعاء.** مكونان يستخدمان `useFetch` يحصلان على state مستقل خاص بهما — مشاركة الـ hook لا تعني مشاركة البيانات. - الاتفاقية: سمها `useX` وأرجع state + دوال (عادة مصفوفة أو object). ## لماذا يهم الـ custom hooks هي الطريقة الاصطلاحية لمشاركة الـ logic (جلب البيانات، النماذج، الاشتراكات، media queries) في React الحديث، مما يبقي المكونات صغيرة والـ logic قابلة للاختبار في العزلة.