أسئلة مقابلات Performance Optimization & Profiling في React
10 سؤال عن Performance Optimization & Profiling من مسار React. اقرأ الإجابة المختصرة لكل سؤال هنا، وافتح السؤال للشرح الكامل والأمثلة والأخطاء الشائعة والمصادر.
- متوسط
كيف تحدد وتعالج مشاكل الـ Unnecessary Re-renders باستخدام React DevTools Profiler؟
نسجل جلسة تفاعل بالـ Profiler ونفحص المخطط اللوني (Flamegraph) لمعرفة المكونات التي أعيد تصييرها وزمن تنفيذها، مع مراجعة تبويب "Why did this render?".
اقرأ الشرح الكامل - متقدم
ما هو الـ Virtualization (Windowing) وكيف تستخدم مكتبة TanStack Virtual لعرض قوائم ضخمة؟
هو تقنية تحصر تصيير عناصر الـ DOM فقط على العناصر الظاهرة حالياً داخل نافذة العرض (Viewport)، مما يحافظ على خفة الـ DOM وسرعة استجابة المتصفح حتى مع ملايين الصفوف.
اقرأ الشرح الكامل - متوسط
ما هي تكلفة React.memo ولماذا لا يجب استخدامه افتراضياً على كافة المكونات؟
لأن React.memo يضيف مقارنة فحص سطحي (Shallow Compare) لكافة الـ Props في كل render؛ فإذا كانت الـ props تتغير دائماً أو كان المكون بسيطاً، فإن المقارنة تكون عبئاً إضافياً دون جدوى.
اقرأ الشرح الكامل - متقدم
كيف يؤثر تقسيم الشفرة (Code Splitting) الديناميكي على مقاييس Core Web Vitals (LCP, FID/INP, CLS)؟
يقلل حجم حزمة الجافاسكربت الأولية مما يسرع وقت تفسير وتحميل الكود في المتصفح، مما يحسن درجات LCP و INP ويمنع تجميد الخيط الرئيسي (Main Thread Blocking).
اقرأ الشرح الكامل - متقدم
ما هي مشكلة الـ Layout Thrashing وكيف نتجنبها في مكونات ريأكت؟
تحدث عندما يتعاقب قراءة قياسات الـ DOM (مثل offsetHeight) مع تعديل أنماط الـ DOM في حلقة سريعة، مما يجبر المتصفح على إعادة حساب التخطيط (Reflow) بشكل متكرر ومكلف.
اقرأ الشرح الكامل - متقدم
كيف تستخدم Web Workers في تطبيقات ريأكت لنقل العمليات الحسابية الشاقة خارج الـ Main Thread؟
باستخدام Web Workers لتشغيل أكواد معالجة البيانات الضخمة وفك تشفير الملفات في خيط معالجة منفصل بالخلفية، مما يحافظ على سلاسة واجهة المستخدم واستجابتها بمعدل 60fps دون أي تقطيع.
اقرأ الشرح الكامل - مبتدئ
ما هي استراتيجيات تحسين تحميل الصور في تطبيقات ريأكت لتفادي الـ Cumulative Layout Shift (CLS)؟
عبر تحديد أبعاد width و height ثابتة أو aspect-ratio مسبقاً في الـ CSS، واستخدام تقنية التحميل الكسول loading="lazy" وتوفير صيغ صور حديثة مثل WebP و AVIF.
اقرأ الشرح الكامل - متقدم
كيف تكشف تسريبات الذاكرة (Memory Leaks) الشائعة في تطبيقات ريأكت باستخدام Chrome Memory Tab؟
بأخذ لقطات ذاكرة (Heap Snapshots) ومقارنتها قبل وبعد فتح شاشات التطبيق وإغلاقها للبحث عن مراجع الكائنات المنفصلة (Detached DOM Nodes) أو المكونات غير المحررة.
اقرأ الشرح الكامل - مبتدئ
كيف تتجنب إنشاء كائنات ومراجع جديدة في جسم المكون (Inline Objects & Arrays) أثناء الـ Render؟
بتعريف الثوابت خارج نطاق دالة المكون إذا كانت لا تعتمد على الـ Props، أو تغليف الكائنات المعتمدة بـ useMemo لتثبيت المرجع الممرض للمكونات الفرعية.
اقرأ الشرح الكامل - متوسط
ما هي فوائد وتحديات تفعيل خيار Transitions لتقسيم العمليات في ريأكت 18؟
الفائدة تكمن في الحفاظ على استجابة الشاشة دون تجميدها أثناء العمليات الثقيلة، والتحدي هو إدارة الحالات المؤقتة (Pending States) وفهم تسلسل تحديثات الواجهة المتزامنة.
اقرأ الشرح الكامل