ما الفرق بين Controlled Components و Uncontrolled Components ومتى نفضل كلاً منهما؟

الإجابة المختصرة

المكون المضبوط (Controlled) تدار قيمته عبر حالة ريأكت (useState)، بينما غير المضبوط (Uncontrolled) يحتفظ بقيمته في الـ DOM الداخلي ويتم قراءته عبر Ref أو استخراج FormData.

الشرح

المكونات المضبوطة توفر تحكماً فورياً للتحقق من صحة المدخلات وإخفاء أو تعطيل الحقول لحظة بلحظة، لكنها تطلق re-render في كل ضغطة زر. المكونات غير المضبوطة أفضل في الأداء وسهولة التكامل مع مكتبات DOM الخارجية والنماذج الضخمة حيث نقرأ البيانات فقط عند تقديم النموذج (onSubmit).

مثال بالكود

// Controlled Component
const [email, setEmail] = useState('');
<input value={email} onChange={e => setEmail(e.target.value)} />

// Uncontrolled Component
const emailRef = useRef<HTMLInputElement>(null);
<input ref={emailRef} defaultValue="[email protected]" />

أخطاء شائعة

• التحويل غير المقصود لعنصر من Uncontrolled إلى Controlled عن طريق تمرير قيمة undefined أولاً ثم قيمة نصية لاحقاً.

أسئلة متابعة

• لماذا تعتبر مكتبة React Hook Form (RHF) متفوقة في الأداء مقارنة بنماذج Formik التقليدية؟
• ما هي الـ Server Actions في React 19 وكيف تبسّط إرسال النماذج بدون جافاسكربت؟

المصادر

• React docs — <input>