Custom Hooks الخطافات المخصّصة
آخر تحديث: 2026-11-03
Custom Hooks الخطافات المخصّصة
الخطّاف المخصّص دالة عادية يبدأ اسمها بـ use، ويمكنها استدعاء خطافات أخرى في داخلها، فتحوّل منطقاً حالوياً مثل الطلبات أو تأخير التنفيذ أو الحفظ أو التبديل إلى وحدة قابلة لإعادة الاستخدام. ولكل استدعاء حالته الخاصة — فما يُعاد استخدامه هو المنطق لا الحالة نفسها. وهو الطريقة المعتادة لمشاركة السلوك بين المكوّنات دون مشاركة البيانات، ويُبقي حالة كل مكوّن محلية وسهلة الفهم.
| المجموعة | أنماط المكونات |
|---|---|
| النوع | خطاف |
| منذ الإصدار | React 16.8 |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
// يجب أن يبدأ الاسم بـ use حتى يستطيع ESLint التحقق من قواعد الخطافات
function useToggle(initial = false) {
const [on, setOn] = useState(initial)
const toggle = () => setOn(v => !v)
return [on, toggle] // شكل القيمة المعادة متروك لك: مصفوفة أو كائن
}القيمة المرجعة：لا توقيع ثابت — أنت من يعرّفه. وفق العرف يعيد زوجاً [القيمة، الإجراء]، أو كائناً يضم مجموعة إجراءات.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
يتبدّل الزران بشكل مستقل — فالمصباح والمروحة يحمل كل منهما حالة تشغيل خاصة به لا تؤثر في الأخرى، ومع ذلك يتشاركان منطق useToggle نفسه.💡 النقاط الأساسية
💡 نصيحة مكوّنان يستدعيان الخطّاف المخصّص نفسه يبقيان حالتيهما منفصلتين تماماً — فالخطّاف يعيد استخدام المنطق ولا يشارك الحالة.
ℹ️ ملاحظة حين تحتاج فعلاً إلى حالة مشتركة، ارفع الحالة إلى الأعلى أو انقلها إلى Context؛ ويظل بإمكان الخطّاف المخصّص أن يجمع useState و useEffect في داخله.
⚠️ تحذير لا تستدعِه إلا في المستوى الأعلى من مكوّن أو من خطّاف آخر، ولا في داخل if أو حلقة أو دالة عادية — وهي القواعد نفسها التي تنطبق على كل خطّاف.
🏷️ المزيد من أنماط المكونات
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س هل الحالة داخل الخطّاف المخصّص مشتركة؟
ج لا. كل استدعاء ينشئ حالته المنفصلة، فهي أقرب إلى الوراثة الوظيفية للمنطق منها إلى حالة فردية.
س هل أعيد مصفوفة أم كائناً؟
ج أعد مصفوفة حين تكون there قيمتان أو ثلاث بدلالات واضحة بحيث يتيح التفكيك إعادة تسميتها؛ وأعد كائناً حين تكون الإجراءات كثيرة أو هناك متّسع للنمو.
س هل يجب فعلاً أن يبدأ الاسم بـ use؟
ج يُنصح بشدة: فهذه العرف الذي تعتمد عليه React و ESLint للتعرّف على الخطافات وفرض قواعدها، ومخالفته تُعطّل فحص الـ lint كله.
