ما هي قواعد الـ Hooks (Rules of Hooks) ولماذا يفرضها ريأكت بصرامة؟

الإجابة المختصرة

القاعدتان هما: استدعاء الـ Hooks فقط في المستوى الأعلى للدالة (Top Level)، واستدعاؤها فقط من داخل دوال مكونات ريأكت أو Custom Hooks، لضمان استقرار ترتيب المصفوفة الداخلية للحالات.

الشرح

ريأكت يخزن حالات المكونات في قائمة مترابطة (Linked List) داخل الـ Fiber Node، ويعتمد حصرياً على الترتيب المتسلسل لاستدعاءات الـ Hooks في كل render لربط كل hook بحالته الخاصة. إذا وُضع الـ Hook داخل شرط (if) أو حلقة تكرار (loop)، فإن تخطي استدعائه سيتسبب في انزياح المؤشر وخلط الحالات بين الـ Hooks المختلفة.

مثال بالكود

// خاطئ: استدعاء داخل شرط
if (isLoggedIn) {
  useEffect(() => { ... }, []); // سيتسبب في خطأ فادح
}

// صحيح: استدعاء في المستوى الأعلى ووضع الشرط داخل الـ Hook
useEffect(() => {
  if (isLoggedIn) {
    // كود مشروط داخل الـ Hook السليم
  }
}, [isLoggedIn]);

أخطاء شائعة

• محاولة استدعاء useState داخل دالة مساعدة عادية غير معرفة كـ Custom Hook يبدأ بـ use.

أسئلة متابعة

• ما هي مشكلة الـ Stale Closures مع useEffect و useCallback وكيف نتغلب عليها؟

المصادر

• React docs — Rules of Hooks