أسئلة مقابلات React مع الإجابات
100 سؤال من أسئلة مقابلات العمل في React، مقسمة على 10 موضوعات: React Core & Virtual DOM وHooks Fundamentals وAdvanced Hooks & Custom Hooks وState Management & Context وRouting & Single Page Apps وPerformance Optimization & Profiling وSSR, SSG & Server Components وForms & Data Handling وTesting React Components وArchitecture, Component Patterns & Best Practices. تغطي الأسئلة المستويات متوسط ومبتدئ ومتقدم، ولكل سؤال إجابة مختصرة تقولها في الانترفيو، وشرح أعمق، وأخطاء شائعة، وروابط للمصادر الرسمية مع تاريخ آخر مراجعة.
الموضوعات
React Core & Virtual DOM
10 سؤال
Hooks Fundamentals
10 سؤال
Advanced Hooks & Custom Hooks
10 سؤال
State Management & Context
10 سؤال
Routing & Single Page Apps
10 سؤال
Performance Optimization & Profiling
10 سؤال
SSR, SSG & Server Components
10 سؤال
Forms & Data Handling
10 سؤال
Testing React Components
10 سؤال
Architecture, Component Patterns & Best Practices
10 سؤال
أسئلة مقابلات React Core & Virtual DOM في React
- ما هو Virtual DOM في ريأكت وكيف يعمل خوارزمية الـ Reconciliation (Diffing)؟
- لماذا تعتبر الـ Keys مهمة جداً عند عرض القوائم وما مخاطر استخدام فهرس المصفوفة (Index) كـ Key؟
- ما هو JSX وما الذي يحدث له خلف الكواليس أثناء عملية الـ Compilation؟
- ما هو مفهوم الـ Pure Components و Purity في دوال ريأكت (Pure Functions)؟
- ما هو دور React Fiber وما الفرق بين Render Phase و Commit Phase؟
- كيف يعمل الـ Event Pooling والـ SyntheticEvent System في ريأكت؟
- ما هي الـ Portals في ريأكت ومتى يجب استخدامها؟
- ما هو الـ StrictMode وما هي الفحوصات والتدقيقات التي يجريها في بيئة التطوير؟
- ما هو مبدأ الـ Lifting State Up ومتى نلجأ إليه؟
- ما هي الـ Error Boundaries وكيف تتعامل مع الأخطاء غير المتوقعة في شجرة المكونات؟
أسئلة مقابلات Hooks Fundamentals في React
- ما هي قواعد الـ Hooks (Rules of Hooks) ولماذا يفرضها ريأكت بصرامة؟
- ما الفرق بين تمرير قيمة مباشرة لدالة setState وتمرير دالة تحديث وظيفية (Updater Function)؟
- ما هي دورة حياة الـ useEffect وكيف تعمل دالة التنظيف (Cleanup Function)؟
- ما هي مشكلة الـ Stale Closures مع useEffect و useCallback وكيف نتغلب عليها؟
- متى يجب استخدام useRef وما الفارق الجوهري بينه وبين useState؟
- ما الفرق بين useMemo و useCallback ومتى يكون استخدامهما ضاراً بالأداء؟
- ما هو useReducer ومتى يفضل اختياره كبديل لـ useState؟
- ما الفرق بين useEffect و useLayoutEffect وتوقيت تنفيذهما بالنسبة لرسم الشاشة؟
- ما هو useContext وكيف تتصرف المكونات المشتركة عند تحديث قيمة الـ Context Provider؟
- ما هو useImperativeHandle وكيف نستخدمه مع forwardRef للتحكم في واجهة المكون الابن؟
أسئلة مقابلات Advanced Hooks & Custom Hooks في React
- كيف تبني Custom Hook لإدارة استهلاك الـ LocalStorage مع دعم التزامن بين النوافذ؟
- ما هو دور useSyncExternalStore ولماذا تم تقديمه في React 18 لحل مشكلة الـ Tearing؟
- ما هو useTransition وكيف يحسن استجابة واجهة المستخدم في العمليات الثقيلة؟
- ما هو useDeferredValue وكيف يختلف عن مفهوم الـ Debounce / Throttle التقليدي؟
- ما هو useId ولماذا يعتبر ضرورياً لإنشاء معرفات فريدة متوافقة مع إمكانية الوصول (Accessibility) في SSR؟
- كيف تصمم Custom Hook للـ Debouncing للقيم أو الدوال مع إلغاء العمليات السابقة؟
- ما هو useInsertionEffect وما هي الحالات الاستثنائية جداً التي يتطلب فيها استخدامه؟
- كيف تبني Custom Hook للـ Infinite Scroll باستخدام IntersectionObserver؟
- ما هي الـ Action Hooks الجديدة في React 19 (مثل useActionState و useFormStatus و useOptimistic)؟
- كيف تتعامل مع مشكلة الـ Hook Factory وتفادي إعادة إنشاء الدوال داخلياً مع useEffectEvent؟
أسئلة مقابلات State Management & Context في React
- ما هو الفرق الجوهري بين Server State و Client State ومتى نتوقف عن استخدام Redux لهما معاً؟
- كيف تمنع إعادة التصيير المفرطة (Re-render Hell) عند استخدام React Context للتطبيقات المتوسطة؟
- ما هو نمط الـ Atomic State في مكتبات مثل Jotai (وRecoil التي أُرشفت) وكيف يقارن بنمط الـ Single Store مثل Redux؟
- كيف يعمل Redux Toolkit (RTK) وما التطورات التي أضافها مقارنة بـ Redux الكلاسيكي؟
- ما هي مكتبة Zustand ولماذا تحظى بشعبية كبيرة كبديل خفيف وسريع لـ Redux؟
- كيف تتعامل مع مشكلة الـ Prop Drilling وما هي أفضل الحلول البديلة؟
- ما هي قواعد الـ Immutability في إدارة حالة ريأكت ولماذا يمنع التعديل المباشر (Direct Mutation)؟
- كيف تدير الـ Optimistic UI Updates وتتعامل مع حالات الفشل والتراجع (Rollback)؟
- متى تكون الحالة المشتقة (Derived State) أفضل من تخزينها في useState مستقل؟
- كيف تتعامل مع حفظ ومزامنة حالة الواجهة في رابط الصفحة (URL Search Params كـ State)؟
أسئلة مقابلات Routing & Single Page Apps في React
- ما الفرق بين Client-Side Routing و Server-Side Routing في تطبيقات الويب؟
- كيف يعمل الـ Data Loading والـ Loaders في الإصدارات الحديثة من React Router (v6.4+ Data APIs)؟
- ما هي المسارات المتداخلة (Nested Routes) وكيف نستخدم وسم <Outlet /> في هيكلة الواجهات؟
- كيف تطبق حماية المسارات (Protected Routes & Auth Guards) وتوجيه المستخدم غير المصرح له؟
- ما هو الـ Lazy Loading للراوتر وكيف يقترن مع React.lazy و Suspense لتجزئة الكود (Code Splitting)؟
- كيف تتعامل مع أخطاء المسارات غير الموجودة (404 Not Found) وصفحات الخطأ المخصصة؟
- كيف يتم التنقل البرمجي (Programmatic Navigation) والتعامل مع معلمات المسار (Params)؟
- ما هي استراتيجيات إعادة ضبط الـ Scroll إلى أعلى الصفحة تلقائياً عند تغيير المسار (Scroll Restoration)؟
- ما الفرق بين MemoryRouter و BrowserRouter و HashRouter ومتى نستخدم كلاً منها؟
- كيف يتم إدارة الـ View Transitions API في التوجيه لإنشاء انتقالات سلسة بين الصفحات؟
أسئلة مقابلات Performance Optimization & Profiling في React
- كيف تحدد وتعالج مشاكل الـ Unnecessary Re-renders باستخدام React DevTools Profiler؟
- ما هو الـ Virtualization (Windowing) وكيف تستخدم مكتبة TanStack Virtual لعرض قوائم ضخمة؟
- ما هي تكلفة React.memo ولماذا لا يجب استخدامه افتراضياً على كافة المكونات؟
- كيف يؤثر تقسيم الشفرة (Code Splitting) الديناميكي على مقاييس Core Web Vitals (LCP, FID/INP, CLS)؟
- ما هي مشكلة الـ Layout Thrashing وكيف نتجنبها في مكونات ريأكت؟
- كيف تستخدم Web Workers في تطبيقات ريأكت لنقل العمليات الحسابية الشاقة خارج الـ Main Thread؟
- ما هي استراتيجيات تحسين تحميل الصور في تطبيقات ريأكت لتفادي الـ Cumulative Layout Shift (CLS)؟
- كيف تكشف تسريبات الذاكرة (Memory Leaks) الشائعة في تطبيقات ريأكت باستخدام Chrome Memory Tab؟
- كيف تتجنب إنشاء كائنات ومراجع جديدة في جسم المكون (Inline Objects & Arrays) أثناء الـ Render؟
- ما هي فوائد وتحديات تفعيل خيار Transitions لتقسيم العمليات في ريأكت 18؟
أسئلة مقابلات SSR, SSG & Server Components في React
- ما الفرق بين CSR و SSR و SSG و ISR في منظومة تطبيقات ريأكت الحديثة؟
- ما هي معضلة الـ Hydration وما هي مسببات الـ Hydration Mismatch الشهيرة؟
- ما هي مكونات خادم ريأكت (React Server Components - RSC) وكيف تختلف جوهرياً عن SSR؟
- ما هو التوجيه "use client" ومتى يجب استخدامه في بنية RSC؟
- ما هو الـ Streaming SSR وكيف يعمل مع دالة renderToPipeableStream في Node.js؟
- كيف يعمل Suspense لجلب البيانات (Data Fetching) وإدارة حالات التحميل المتداخلة؟
- ما هي دالة use() الجديدة في React 19 وكيف تتعامل مع الـ Promises والـ Context؟
- كيف تتعامل مع معالجة الـ SEO والوسوم الوصفية (Metadata & Open Graph) في تطبيقات ريأكت؟
- ما هي استراتيجية الـ Islands Architecture وكيف تقارن بـ React Hydration التقليدي؟
- كيف تتعامل مع مشاكل الـ Cookies والجلسات والـ Caching في بيئة الـ Edge Runtime مع ريأكت؟
أسئلة مقابلات Forms & Data Handling في React
- ما الفرق بين Controlled Components و Uncontrolled Components ومتى نفضل كلاً منهما؟
- لماذا تعتبر مكتبة React Hook Form (RHF) متفوقة في الأداء مقارنة بنماذج Formik التقليدية؟
- كيف تدمج مكتبة Zod مع نماذج ريأكت لتوفير التحقق من النوع من البداية للنهاية (End-to-End Type-Safety)؟
- كيف تتعامل مع رفع الملفات المتعددة (File Uploads) ومؤشرات تقدم الرفع في نماذج ريأكت؟
- كيف تدير النماذج الديناميكية التي تحتوي على مصفوفة حقول متغيرة (Dynamic Field Arrays)؟
- ما هي الـ Server Actions في React 19 وكيف تبسّط إرسال النماذج بدون جافاسكربت؟
- كيف تتعامل مع حفظ مسودات النماذج تلقائياً (Auto-save) لمنع ضياع مدخلات المستخدم؟
- ما هي معايير إتاحة النماذج للأشخاص ذوي الإعاقة (Form Accessibility - a11y)؟
- كيف تمنع النقر المزدوج وتقديم النموذج المتكرر (Double Submissions)؟
- كيف تبني معالج نماذج متعدد الخطوات (Multi-step Wizard Form) مع الحفاظ على البيانات عند الرجوع؟
أسئلة مقابلات Testing React Components في React
- ما هي فلسفة React Testing Library (RTL) وكيف تختلف عن اختبارات الـ Enzyme القديمة؟
- ما الفرق بين getBy و queryBy و findBy في استعلامات React Testing Library؟
- لماذا يفضل استخدام userEvent بدلاً من fireEvent في اختبار تفاعلات المستخدم؟
- ما هو Mock Service Worker (MSW) ولماذا هو المعيار الذهبي لاختبار طلبات الـ API في ريأكت؟
- ما هو التحذير الشهير: "act(...) warning" ولماذا يظهر وكيف نعالجه بشكل صحيح؟
- كيف تختبر Custom Hook بشكل منفصل باستخدام renderHook من RTL؟
- ما الفرق بين اختبارات المكونات (Component Tests) واختبارات النهاية إلى النهاية (E2E) بواسطة Playwright؟
- كيف تختبر المكونات التي تعتمد على React Context دون الحاجة لتشغيل التطبيق كاملاً؟
- ما هي اختبارات اللقطات (Snapshot Testing) وما هي محاذير الإفراط في استخدامها؟
- كيف تختبر إمكانية الوصول (Accessibility Testing) في مكونات ريأكت باستخدام axe-core؟
أسئلة مقابلات Architecture, Component Patterns & Best Practices في React
- ما هو نمط Compound Components وكيف يستخدم لبناء مكونات واجهة مرنة ومعقدة؟
- ما الفرق بين Higher-Order Components (HOC) و Custom Hooks ولماذا حلت الهوكس محل الـ HOCs؟
- ما هو نمط الـ Headless UI ولماذا يعتبر التوجه الأبرز في بناء أنظمة التصميم الحديثة (Design Systems)؟
- كيف تطبق مبدأ المسؤولية الواحدة (Single Responsibility) وفصل الـ Container والمكونات التقديمية؟
- ما هي معمارية Feature-Sliced Design (FSD) وكيف تنظم مشاريع ريأكت الضخمة بمقياس Enterprise؟
- كيف تبني نظام تصميمي متكامل يدعم الـ Dark Mode وأنظمة السمات المتعددة (Theming)؟
- ما هو نمط Render Props وما هي استخداماته المعاصرة؟
- كيف تتعامل مع التبعيات الدائرية (Circular Dependencies) في مشاريع ريأكت الضخمة؟
- ما هي استراتيجيات التعامل مع الـ Micro-frontends في ريأكت باستخدام Webpack Module Federation؟
- كيف تطبق مبادئ البرمجة النظيفة (Clean Code) في تنظيم مجلدات وهيكلة ملفات ريأكت؟