أسئلة مقابلات Forms & Data Handling في React
10 سؤال عن Forms & Data Handling من مسار React. اقرأ الإجابة المختصرة لكل سؤال هنا، وافتح السؤال للشرح الكامل والأمثلة والأخطاء الشائعة والمصادر.
- مبتدئ
ما الفرق بين Controlled Components و Uncontrolled Components ومتى نفضل كلاً منهما؟
المكون المضبوط (Controlled) تدار قيمته عبر حالة ريأكت (useState)، بينما غير المضبوط (Uncontrolled) يحتفظ بقيمته في الـ DOM الداخلي ويتم قراءته عبر Ref أو استخراج FormData.
اقرأ الشرح الكامل - متوسط
لماذا تعتبر مكتبة React Hook Form (RHF) متفوقة في الأداء مقارنة بنماذج Formik التقليدية؟
لأن React Hook Form تعتمد على النمط غير المضبوط (Uncontrolled) وتسجيل المدخلات عبر Refs، مما يمنع إعادة تصيير كامل النموذج عند كل ضغطة زر على عكس Formik التي تعتمد على الـ Controlled State.
اقرأ الشرح الكامل - متوسط
كيف تدمج مكتبة Zod مع نماذج ريأكت لتوفير التحقق من النوع من البداية للنهاية (End-to-End Type-Safety)؟
نعرف مخطط التحقق (Zod Schema) ونستخرج نوع TypeScript منه بواسطة z.infer، ثم نربطه بنموذج ريأكت عبر zodResolver للتحقق المتزامن من البيانات.
اقرأ الشرح الكامل - متوسط
كيف تتعامل مع رفع الملفات المتعددة (File Uploads) ومؤشرات تقدم الرفع في نماذج ريأكت؟
نستخدم مدخل type="file" لقراءة مصفوفة الملفات عبر e.target.files، ونقوم بتغليفها في كائن FormData وإرسالها بواسطة XMLHttpRequest أو Axios للاستماع لحدث onUploadProgress.
اقرأ الشرح الكامل - متوسط
كيف تدير النماذج الديناميكية التي تحتوي على مصفوفة حقول متغيرة (Dynamic Field Arrays)؟
نستخدم خطاف useFieldArray في React Hook Form لإضافة وحذف وتحريك الحقول ديناميكياً مع تزويد كل حقل بمفتاح فريد (Key) ثابت ومخصص.
اقرأ الشرح الكامل - متقدم
ما هي الـ Server Actions في React 19 وكيف تبسّط إرسال النماذج بدون جافاسكربت؟
هي دوال غير متزامنة تنفذ حصرياً على الخادم ويمكن ربطها مباشرة بخاصية action في وسم <form>، وتعمل حتى لو تم تعطيل JavaScript في متصفح العميل (Progressive Enhancement).
اقرأ الشرح الكامل - متوسط
كيف تتعامل مع حفظ مسودات النماذج تلقائياً (Auto-save) لمنع ضياع مدخلات المستخدم؟
عبر مراقبة قيم النموذج بالـ Debounce وحفظها في localStorage أو إرسالها للخادم في الخلفية تلقائياً، مع تنظيف المسودة فور نجاح التقديم النهائي.
اقرأ الشرح الكامل - متوسط
ما هي معايير إتاحة النماذج للأشخاص ذوي الإعاقة (Form Accessibility - a11y)؟
ربط كل حقل إدخال بـ <label> صريح عبر htmlFor و id، وتحديد سمات aria-invalid و aria-describedby لرسائل الخطأ، ودعم التنقل الكامل بلوحة المفاتيح والتركيز التلقائي.
اقرأ الشرح الكامل - مبتدئ
كيف تمنع النقر المزدوج وتقديم النموذج المتكرر (Double Submissions)؟
بتعطيل زر الإرسال بمجرد بدء الطلب باستخدام حالة isSubmitting، مع إلغاء أو تجاهل أي طلبات لاحقة أثناء معالجة الطلب الأول.
اقرأ الشرح الكامل - متوسط
كيف تبني معالج نماذج متعدد الخطوات (Multi-step Wizard Form) مع الحفاظ على البيانات عند الرجوع؟
نعرف حالة مركزية تخزن بيانات جميع الخطوات في المكون الأب، ونعرض المكون المقابل لرقم الخطوة الحالية مع تزويده بزر للرجوع والتقدم دون فقدان المدخلات السابقة.
اقرأ الشرح الكامل