Rules of Hooks قواعد استخدام الـ Hooks
آخر تحديث: 2026-11-03
Rules of Hooks قواعد استخدام الـ Hooks
تخضع الـ Hooks لقاعدتين صارمتين: استدعِها فقط في المستوى الأعلى من مكوّن function أو من Hook مخصّص، ولا تضعها أبدًا داخل حلقة أو شرط أو دالة متداخلة؛ واستدعِها فقط من دوال React، لا من دوال JavaScript عادية. يتطابق React مع كل Hook وحالته بحسب ترتيب الاستدعاء، فإذا تغيّر الترتيب اختلطت الحالات بين المواضع وحدّثت الواجهة القيمة الخاطئة.
| المجموعة | التوجيه وإدارة الحالة |
|---|---|
| النوع | نمط |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
// ✅ Call unconditionally at the top level
function Counter() {
const [n, setN] = useState(0)
useEffect(() => { /* ... */ }, [])
// ❌ Not allowed: if (n > 0) useEffect(...)
// ❌ Not allowed: useState(0) inside a for loop
return <button onClick={() => setN(n + 1)}>{n}</button>
}القيمة المرجعة：لا قيمة مرجعة؛ إنها نمط برمجي وليست واجهة برمجية قابلة للاستدعاء.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
يعرض اللوح قاعدتين بعلامة ✓ وحالة مضادة واحدة بعلامة ✗؛ وعند النقر على الأزرار يتحدّث العدّاد والحقل، وتستمر الـ Hooks في العمل بالترتيب الثابت نفسه مهما تفاعلت، فلا تختلط الحالات بين المواضع.💡 النقاط الأساسية
⚠️ تحذير كسر القاعدة لا يرمي خطأً فورًا، بل يظهر أخطاءً غريبة مثل «النقر على الزر A يغيّر قيمة B»؛ ويتلقّطها eslint-plugin-react-hooks قبل البناء.
💡 نصيحة يجب أن يأتي الـ return المبكر بعد كل استدعاءات الـ Hooks، وإلا تخطّت إحدى عمليات الرسم Hook فأفسدت ترتيب الاستدعاء.
ℹ️ ملاحظة يستطيع React Compiler تحسين المكوّنات وقت البناء، لكن القاعدتين تبقيان الشرط المسبق لعمله.
🏷️ المزيد من التوجيه والحالة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س لماذا لا يمكن استدعاء Hook داخل شرط؟
ج يطابق React كل Hook بحالته بحسب ترتيب الاستدعاء؛ فالاستدعاء الشرطي يُفلت الترتيب ويقرأ الـ n من Hook حالة شخص آخر.
س هل يمكن لـ Hook مخصّص استدعاء Hooks أخرى؟
ج نعم، هذه بالضبط غاية الـ Hook المخصّص — دالة اسمها يبدأ بـ use تتبع داخل جسمها نفس قواعد الاستدعاء في المستوى الأعلى.
س هل يمكن للمكوّن أن يُرجع قبل استدعاء Hooks الخاصة به؟
ج لا. إمّا أن ترفع الـ Hooks فوق الـ return، أو تفصل JSX الذي يلي الـ return إلى مكوّن فرعي، بحيث يُنفَّذ كل Hook في كل عملية رسم.
