Question 1

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

Accepted Answer

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

Question 2

ما الفرق بين تمرير قيمة مباشرة لدالة setState وتمرير دالة تحديث وظيفية (Updater Function)؟

Accepted Answer

تمرير دالة تحديث (Functional Updater) يضمن قراءة أحدث حالة متوفرة في الطابور وحساب القيمة الجديدة بناءً عليها حتى مع وجود تحديثات مجمعة متعددة أو إغلاقات قديمة (Stale Closures).

Question 3

ما هي دورة حياة الـ useEffect وكيف تعمل دالة التنظيف (Cleanup Function)؟

Accepted Answer

دالة الـ Cleanup تنفذ قبل كل تشغيل جديد للـ Effect وعند إزالة المكون من الـ DOM (Unmount)، ووظيفتها إلغاء الاشتراكات والاتصالات ومسح الـ Timers لتجنب تسريب الذاكرة.

Question 4

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

Accepted Answer

تحدث عندما تلتقط الدالة متغيراً من الـ Scope الخارجي وقت إنشائها وتظل تحتفظ بقيمته القديمة حتى بعد تحديثه في دورات الـ render اللاحقة بسبب غيابه عن مصفوفة التبعيات (Dependency Array).

Question 5

متى يجب استخدام useRef وما الفارق الجوهري بينه وبين useState؟

Accepted Answer

يستخدم useRef لتخزين قيم قابلة للتعديل تدوم طوال عمر المكون دون التسبب في إعادة التصيير (Re-render) عند تعديلها، وكذلك للوصول المباشر لعقد الـ DOM.

Question 6

ما الفرق بين useMemo و useCallback ومتى يكون استخدامهما ضاراً بالأداء؟

Accepted Answer

دالة useMemo تحفظ نتيجة عملية حسابية معقدة، بينما useCallback تحفظ هوية دالة ممررة بين عمليات الـ Render لتفادي إعادة تصيير المكونات المحسنة بـ React.memo؛ استخدامهما للعمليات البسيطة يضيف عبء ذاكرة ومقارنة لا داعي له.

Question 7

ما هو useReducer ومتى يفضل اختياره كبديل لـ useState؟

Accepted Answer

هو hook لإدارة الحالات المعقدة التي تتضمن انتقالات حالات متعددة أو عندما تعتمد الحالة التالية على خطوات متفرقة، حيث يفصل منطق تعديل الحالة في دالة Reducer نقية ومستقلة.

Question 8

ما الفرق بين useEffect و useLayoutEffect وتوقيت تنفيذهما بالنسبة لرسم الشاشة؟

Accepted Answer

دالة useLayoutEffect تعمل بشكل متزامن بعد تعديل الـ DOM وقبل أن يقوم المتصفح برسم الشاشة (Paint)، بينما useEffect تعمل بشكل غير متزامن بعد انتهاء رسم الشاشة.

Question 9

ما هو useContext وكيف تتصرف المكونات المشتركة عند تحديث قيمة الـ Context Provider؟

Accepted Answer

هو hook يتيح للمكونات قراءة البيانات من Provider أعلى الشجرة مباشرة دون Prop Drilling؛ وعندما تتغير قيمة الـ Provider يعاد تصيير كافة المكونات المستهلكة له تلقائياً.

Question 10

ما هو useImperativeHandle وكيف نستخدمه مع forwardRef للتحكم في واجهة المكون الابن؟

Accepted Answer

يستخدم useImperativeHandle لتخصيص الخصائص والدوال التي يتم كشفها للمكون الأب عبر الـ Ref، بدلاً من تعريضه لكامل عقدة الـ DOM الداخلية.