500+ React Query Interview Questions with Answers 2026

أهلا بك عزيزي المتابع لموقع (journey for learn) نقدم دورات بكوبونات متاحة لاول 1000 تسجيل مجاني فقط وكوبونات اخري لفترة محدودة فاذا كنت تريد ان تحصل علي كل الكورسات علي موقعنا وان تكون اول المسجلين في الكورسات المجانية قم بتسجيل الدخول أوقم بالدخول علي وسائل التواصل الاجتماعي وخصوصا التليجرام نوضح الوصف المختصر والطويل للدورات لكي تعرف الدروس التي سوف تتعلمها بسهولة ويسر :

تغطية تفصيلية لنطاق الاختبار تم تصميم مستودع الاختبار التدريبي هذا بدقة ليعكس التوزيعات الفنية الواقعية المتوقعة في مقابلات مطوري الواجهة الأمامية لـ React وReact Query على مستوى المؤسسة.

• أساسيات React (20%): قواعد بناء جملة JSX الأساسية، والمكونات الوظيفية والفئوية، وتدفق البيانات أحادي الاتجاه مع Props، وبنية الحالة المحلية، وطرق دورة الحياة القديمة.
• React Hooks (18%): الإتقان useState، وإدارة الآثار الجانبية باستخدام useEffect، واستهلاك البيانات العالمية عبر useContext، والدمج المنطقي المعقد باستخدام useReducer، وتصميم خطافات مخصصة قابلة لإعادة الاستخدام.
• تحسين التفاعل (12%): الغوص العميق في آليات DOM الظاهري، ومسارات تنفيذ المصالحة، وضبط خوارزمية الاختلاف، وتقنيات تحسين أداء العرض مثل النوافذ والتحميل البطيء.
• إدارة حالة التفاعل (15%): مقارنة الحالة المحلية مقابل العناصر التي تم تمريرها، وتوسيع نطاق البنيات العالمية باستخدام واجهة برمجة تطبيقات السياق، والحد من النموذج المعياري في Redux Toolkit، ومكتبات التخزين المؤقت الخارجية غير المتزامنة مثل TanStack Query (React Query).
• React Routing and Navigation (10%): تكوين المسارات البرمجية عبر React Router، وأداء التوجيه من جانب العميل، والمقايضات المعمارية في العرض من جانب الخادم (SSR)، والتنقل ذو الحالة الأنماط.
• اختبار وتصحيح أخطاء React (8%): إعدادات اختبار الوحدة باستخدام Jest، ومحاكاة تفاعلات DOM عبر مكتبة اختبار React، وتكوين التأكيدات الشاملة، وتقنيات تصحيح أخطاء المتصفح الحديثة المتقدمة.
• أفضل ممارسات React (7%): تنظيم التعليمات البرمجية القابلة للتطوير، وتنسيق القواعد باستخدام تكوينات نمط التعليمات البرمجية الصارمة، وأفضل ممارسات أمان التطبيق الأساسية، وإرشادات إمكانية الوصول إلى المكونات العالمية. (WCAG).
• موضوعات React المتقدمة (10%): آليات المحرك الداخلي لـ React Fiber، والجدولة غير المتزامنة ضمن الوضع المتزامن، وحدود جلب البيانات الهيكلية باستخدام Suspense، وتقنيات التحسين المتقدمة.

حول الدورة التدريبية يتطلب إجراء مقابلة مع هندسة الواجهة الأمامية الحديثة أو هندسة واجهة المستخدم أكثر بكثير من مجرد بناء واجهات وظيفية. تبحث فرق تطوير الويب الحديثة عن المرشحين الهندسيين الذين يفهمون ما يحدث تحت السطح - كيف تتسلسل تغييرات الحالة عبر Virtual DOM، وكيف تقوم مكتبات التخزين المؤقت مثل React Query بمزامنة العملاء المحليين مع قواعد البيانات البعيدة، وكيف يتم تحسين خطوط العرض لمنع تغييرات التخطيط. لقد قمت ببناء إطار اختبار الممارسة الشامل هذا ليعكس خط الأسئلة الدقيق الذي تستخدمه شركات التكنولوجيا الكبرى لتقييم كبار المرشحين. مع 550 سؤال تدريبي أصلي ومفصل للغاية، تتجاوز هذه الدورة عمليات البحث النحوية الأساسية. أقوم بتحليل مقتطفات التعليمات البرمجية في العالم الحقيقي، وحالات حافة مزامنة الحالة الصعبة، وتسريبات الذاكرة المخصصة، ومصفوفات التبعية المعقدة. يتضمن كل سؤال تحليلاً فنيًا شاملاً يوضح بالتفصيل سبب نجاح البنية الصحيحة ولماذا تتسبب الأساليب البديلة في تدهور الأداء أو حالات البيانات القديمة في الإنتاج. سواء كنت تستهدف مسار React Developer متخصصًا، أو تستعد لتقييم تحسين واجهة المستخدم على مستوى النظام، أو تتقن حدود الحالة غير المتزامنة قبل حلقة مقابلة رفيعة المستوى، فإن هذا المورد يقدم الممارسة الصارمة المطلوبة لمسح جولاتك الفنية بثقة في محاولتك الأولى. معاينة أسئلة التدريب النموذجية لتقييم العمق الهيكلي والدقة الفنية للتفسيرات المضمنة في بنك الأسئلة هذا، يرجى مراجعة نماذج الأسئلة الثلاثة عالية الدقة هذه. السؤال 1: إدارة دورة حياة ذاكرة التخزين المؤقت غير المتزامنة في TanStack React Query، ينفذ المطور تخطيطًا قياسيًا لجلب البيانات باستخدام خطاف useQuery الخاص بـ React Query. يقوم تكوين ذاكرة التخزين المؤقت بتعيين وقت قديم قدره 10000 مللي ثانية (10 ثوانٍ) وgcTime (ذاكرة التخزين المؤقتة سابقًا) يبلغ 300000 مللي ثانية (5 دقائق). يتم إلغاء تحميل مثيلات المكون تمامًا بعد ثانيتين من تحليل البيانات بنجاح. ما العبارة التي تصف بدقة الحالة التشغيلية لمجموعة البيانات المحددة هذه بعد 30 ثانية؟

• أ) تتم إزالة البيانات بالكامل من الذاكرة نظرًا لإلغاء تحميل مثيل المكون النشط.
• ب) تظل بيانات الاستعلام في ذاكرة التخزين المؤقت، مع الاحتفاظ بحالة الحالة "قديمة"، ومؤقت جمع البيانات المهملة الخاص بها ينخفض بشكل فعال.
• ج) تتم إعادة تعيين حالة بيانات الاستعلام فورًا إلى "جديدة" لأنه لا يوجد أي مراقبين نشطين يراقبون الخطاف.
• د) الخلفية يُطلق محرك الإرجاع طلبًا فوريًا للشبكة للحفاظ على تحديث البيانات لعمليات التثبيت المستقبلية.
• E) ينقل React Query البيانات إلى حالة هيكلية "مجمدة"، مما يؤدي إلى تعطيل جمع البيانات المهملة تمامًا حتى تحدث عملية إعادة تحميل.
• F) تطرح ذاكرة التخزين المؤقت خطأ عدم تطابق في التنفيذ لأن gcTime لا يمكن تشغيله عند انقضاء الوقت القديم.

الإجابة والشرح الصحيحان:

• الإجابة الصحيحة: ب
• سبب صحة ذلك: عندما يتم إلغاء تحميل جميع مثيلات المكونات التي تستخدم استعلامًا محددًا، يفقد الاستعلام مراقبيه النشطين. في تلك اللحظة بالضبط، يتم وضع علامة على مجموعة البيانات على أنها "غير نشطة". تصبح حالة البيانات "قديمة" نظرًا لانقضاء فترة زمنية مدتها 10 ثوانٍ بعلامة 30 ثانية. يبدأ مؤقت تجميع البيانات المهملة (gcTime) العد التنازلي لمدة 5 دقائق فور إلغاء التثبيت. نظرًا لمرور 30 ​​ثانية فقط، تظل البيانات مخزنة بشكل آمن في الذاكرة، وجاهزة للاسترجاع الهيكلي الفوري إذا تم تحميل مكون جديد قبل انتهاء مدة 5 دقائق.
• لماذا تكون الخيارات البديلة غير صحيحة:
  • الخيار أ غير صحيح: لا يؤدي إلغاء التثبيت إلى مسح ذاكرة التخزين المؤقت؛ تخضع عملية إزالة البيانات بالكامل لانتهاء صلاحية ساعة gcTime.
  • الخيار C غير صحيح: تنتقل البيانات من حديثة إلى قديمة بمرور الوقت؛ يعمل عدم وجود مراقبين على تسريع الانتقال إلى حالة غير نشطة بدلاً من إعادتها إلى حالة جديدة.
  • الخيار D غير صحيح: يتم إيقاف عمليات إعادة جلب الخلفية التلقائية بشكل صريح عندما لا يكون هناك مراقبون نشطون يراقبون الاستعلام الهدف.
  • الخيار E غير صحيح: لا يوجد خيار حالة "مجمدة"؛ تعمل آلية تجميع البيانات المهملة بشكل مستقل عن تخطيطات التطبيق النشطة.
  • الخيار F غير صحيح: يعمل staleTime وgcTime كسير عمل منفصل تمامًا؛ إن وجود gcTime أطول من الوقت القديم هو أفضل ممارسة قياسية.

السؤال 2: عدم تطابق إغلاق الخطاف المخصص في خط useEffect Pipeline الخاص بـ React ضع في اعتبارك خطافًا مخصصًا مصممًا لإدارة مؤقت الفاصل الزمني قيد التشغيل. يقبل الخطاف متغيرًا رقميًا خارجيًا يسمى CurrentScore. داخل الخطاف، يقوم تخطيط useEffect بإنشاء مثيل setInterval الأصلي الذي يشير إلى currentScore داخل نص وظيفة رد الاتصال الخاصة به. مصفوفة تبعيات التأثير فارغة تمامًا []. كيف سيتصرف هذا الخطاف عندما تتغير قيمة CurrentScore الخارجية من 10 إلى 20؟

• أ) يؤدي الفاصل الزمني للتشغيل إلى حدوث خطأ في معالجة DOM لأنه لا يمكنه قراءة المتغيرات الرقمية المتغيرة عبر عمليات الإغلاق.
• ب) تتم إعادة تنفيذ الفاصل الزمني للخلفية تلقائيًا بقيمة النتيجة المحدثة البالغة 20 دون إعادة تشغيل المؤقت الداخلي.
• ج) تستمر وظيفة رد الاتصال في قراءة القيمة التي لا معنى لها البالغة 10 بسبب توقف JavaScript قيد الإغلاق.
• د) تكتشف React التغيير المتغير وتفرض عملية تفكيك وإعادة بناء كاملة لعناوين الذاكرة الداخلية للخطاف المخصص.
• هـ) يتم تحديث الحالة الداخلية بشكل صحيح ولكن يفشل Virtual DOM في تشغيل خوارزميات الاختلاف المتطابقة.
• و) تتسبب مصفوفة التبعية الفارغة في تشغيل حلقة التأثير بشكل مستمر على كل إطار عرض مكون فردي.

الإجابة والشرح الصحيح:

• الإجابة الصحيحة: C
• لماذا هذا صحيح: عندما يتم تعريف مصفوفة تبعية useEffect على أنها فارغة []، يتم تشغيل كتلة تنفيذ كود التأثير مرة واحدة بالضبط أثناء مرحلة تثبيت المكون الأولي. يلتقط الإغلاق الذي تم تشكيله بواسطة وظيفة رد الاتصال الداخلية متغيرات النطاق تمامًا كما كانت موجودة أثناء تمرير العرض الأولي. نظرًا لأن قيمة currentScore كانت 10 أثناء العرض الأول، فإن رد الاتصال الفاصل يتم تثبيته على تلك القيمة بشكل دائم. عندما يتم تحديث CurrentScore خارجيًا إلى 20، يستمر الفاصل الزمني في قراءة القيمة الأولية لأنه لا يتم إعادة تقييم كتلة التأثير مطلقًا لالتقاط حالة المتغير الجديد.
• لماذا تكون الخيارات البديلة غير صحيحة:
  • الخيار أ غير صحيح: لا تتعطل عمليات إغلاق JavaScript عندما تتغير المتغيرات؛ فهي ببساطة تستمر في الإشارة إلى القيم المحددة التي تم التقاطها عند إنشاء الإغلاق.
  • الخيار ب غير صحيح: تفتقر الفواصل الزمنية الأصلية إلى ميزة التحديث التلقائي للنطاقات الملتقطة؛ يجب عليك مسحها وإعادة تشغيلها بشكل صريح لتغيير القيم.
  • الخيار D غير صحيح: لا يتجاوز React النطاقات الهيكلية يدويًا أو يعيد بناء هياكل تتبع الخطاف استنادًا إلى القيم المخفية خارج مصفوفة التبعية.
  • الخيار E غير صحيح: المشكلة متجذرة بالكامل في قواعد تحديد نطاق JavaScript القياسية، وليس انهيار دورة تحديث React Virtual DOM.
  • الخيار F غير صحيح: تضمن مصفوفة التبعية الفارغة تشغيل التأثير مرة واحدة فقط عند التثبيت؛ يحدث التشغيل على كل عرض فردي عندما يتم حذف المصفوفة بالكامل.

السؤال 3: عناصر التحكم في إعادة عرض المكونات باستخدام useMemo ومقارنات المحتوىيقوم المطور بتغليف مكون عرض تقديمي فرعي كثيف الموارد في React.memo(). يتلقى هذا التخطيط الفرعي مجموعة من سجلات التكوين التي يتم تمريرها عبر دعامة تسمى datasetList. يقوم المكون الأصلي بتحديث حالته الداخلية بشكل متكرر، لكن محتويات المصفوفة داخل datasetList تظل متطابقة من حيث القيم والمؤشرات. لماذا يستمر المكون الفرعي في إعادة العرض عند كل تحديث أصل؟

• أ) ستتم إعادة عرض المكونات التي تستخدم React.memo دائمًا إذا تغيرت حالتها الأصلية، بغض النظر عن تخطيطات الدعامة.
• ب) يجب تحويل المكون الفرعي بشكل صريح إلى تكوين فئة للاستفادة من ميزات الحفظ.
• ج) يتغير مرجع المصفوفة الذي تم تمريره عبر datasetList في كل دورة عرض أصل، مما يؤدي إلى كسر عمليات التحقق من مساواة الخاصية الضحلة.
• د) يُجري React.memo مقارنة بنيوية عميقة عبر جميع الكائنات المتداخلة، مما يؤدي إلى زيادة التحميل على ذاكرة التخزين المؤقت لذاكرة المكون.
• هـ) تتطلب خوارزمية الاختلاف الداخلية أن يمتلك العنصر الأصلي سمة مفتاح هيكلية فريدة.
• و) يستخدم المكون الفرعي تنسيق تخطيط JSX الذي لا يمكن تحليله بواسطة أدوات التحسين الافتراضية.

الإجابة الصحيحة والشرح:

• الإجابة الصحيحة: C
• لماذا هي صحيحة: افتراضيًا، يُجري React.memo مقارنة سطحية صارمة للدعائم الواردة عبر دورات العرض. في JavaScript، المصفوفات هي أنواع بيانات مرجعية. إذا قام المكون الأصلي بإعادة إنشاء المصفوفة الحرفية في كل تمريرة عرض (على سبيل المثال، datasetList={[...]} أو عبر تصفية غير محفوظة)، فإن المصفوفة الجديدة تشغل عنوانًا مرجعيًا مميزًا للذاكرة. حتى لو كانت القيم الداخلية متطابقة تمامًا، فإن التحقق من المساواة الضحلة (prevProps.datasetList === nextProps.datasetList) يُرجع خطأ، مما يجبر المكون الفرعي على إعادة العرض. لإصلاح ذلك، يجب على الأصل تغليف كتلة تهيئة المصفوفة في خطاف useMemo.
• لماذا الخيارات البديلة غير صحيحة:
  • الخيار A غير صحيح: الهدف الأساسي لـ React.memo هو تخطي عمليات إعادة العرض الفرعية عند حدوث تغييرات رئيسية، بشرط أن تظل الدعائم الفرعية الواردة دون تغيير.
  • الخيار B غير صحيح: يعمل الحفظ بشكل مثالي مع التخطيطات الوظيفية الحديثة؛ تستخدم تكوينات الفئة React.PureComponent بدلاً من ذلك.
  • الخيار D غير صحيح: يتجنب React.memo بشكل صريح مطابقة القيمة العميقة على وجه التحديد لأن اجتياز الهياكل العميقة في كل إطار مكلف من الناحية الحسابية.
  • الخيار E غير صحيح: السمة الرئيسية مطلوبة عند عرض قوائم ديناميكية من العناصر الشقيقة، وليس لحفظ المكونات الفرعية المستقلة.
  • الخيار F غير صحيح: بنيات JSX ليس لها أي تأثير على أداء الحفظ القياسي؛ كلاهما يتبع خطوط تنفيذ JavaScript القياسية تحت الغطاء.

ما يمكن توقعه

• مرحبًا بك في اختبارات أسئلة المقابلة لمساعدتك في الاستعداد للاختبار التدريبي على أسئلة مقابلة React Query.
• يمكنك إعادة إجراء الاختبارات عدة مرات كما تريد
• هذا بنك أسئلة أصلي ضخم
• يمكنك الحصول على الدعم من المدرسين إذا كانت لديك أسئلة
• يحتوي كل سؤال على تفاصيل الشرح
• متوافق مع الجوال مع تطبيق Udemy

نأمل أن تكون مقتنعًا الآن! وهناك الكثير من الأسئلة داخل الدورة.

ما هي المتطلبات الأساسية لدخول الدورة والتسجيل فيها على موقعنا؟ رحلة التعلم:

(احصل على الدورة للدخول إلى الموقع والتسجيل)

يجب أن يكون لديك بريد إلكتروني (حساب بريد) تتذكره لنفسك وأيضًا يجب أن تتذكر كلمة مرور البريد الإلكتروني الذي ستسجل به ، وإذا لم يكن لديك حساب بريد إلكتروني ، فمن الأفضل إنشاء حساب (Gmail)