رياكت 19: أدوات جديدة للعمل مع النماذج

تستعرض هذه المقالة التحديات الشائعة التي يواجهها المطورون عند التعامل مع النماذج — وكيف يقدم React 19 أخيرًا أدوات طال انتظارها تجعل التعامل مع النماذج أكثر نظافة وإعلانية وأقل عرضة للأخطاء.

على مدار السنوات الست الماضية في تطوير الواجهة الأمامية — من بناء أنظمة نماذج معقدة إلى دمج أدوات الذكاء الاصطناعي في SDG — لقد كتبت وصححت أخطاء وأعدت هيكلة المزيد من كود النماذج أكثر مما أود الاعتراف به.

وإذا سبق لك بناء أو صيانة نماذج في React، فربما تشاركني هذا الشعور. إنها بسيطة بشكل خادع... حتى لا تكون كذلك.

في هذه المقالة، سأستعرض معك التحديات الشائعة التي يواجهها المطورون عند التعامل مع النماذج — وكيف يقدم React 19 أخيرًا بعض الأدوات التي طال انتظارها والتي تجعل التعامل مع النماذج أكثر نظافة وإعلانية وأقل عرضة للأخطاء. ✨

التحديات الشائعة في التعامل مع النماذج

🔍 لنبدأ بنقاط الألم التي واجهها كل مطور React مرة واحدة على الأقل.

1. كود متكرر في كل مكان

إدارة حالة النموذج في React عادة ما تبدأ هكذا:

const [name, setName] = useState(''); const [surname, setSurname] = useState(''); const [error, setError] = useState(null); function handleSubmit(event) { event.preventDefault(); }

✅ إنها بسيطة — ومناسبة تمامًا للنماذج الصغيرة.

ولكن بمجرد أن تبدأ بالتوسع، ستجد نفسك غارقًا في خطافات الحالة المتكررة، وإعادة الضبط اليدوية، واستدعاءات event.preventDefault() التي لا تنتهي.

كل ضغطة مفتاح تؤدي إلى إعادة العرض، وإدارة الأخطاء أو الحالات المعلقة تتطلب المزيد من متغيرات الحالة. إنها وظيفية، لكنها بعيدة عن الأناقة.

2. تمرير الخصائص عبر الطبقات

عندما لا يكون النموذج مجرد مكون واحد بل تسلسل هرمي من المكونات المتداخلة، ينتهي بك الأمر إلى تمرير الخصائص عبر كل مستوى:

<Form> <Field error={error} value={name} onChange={setName}> <Input /> </Field> </Form>

الحالة، الأخطاء، علامات التحميل — كلها تمر عبر طبقات متعددة. 📉 \n هذا لا يضخم الكود فحسب، بل يجعل الصيانة وإعادة الهيكلة مؤلمة. 😓

3. التحديثات المتفائلة صعبة

هل سبق لك أن حاولت تنفيذ تحديثات متفائلة يدويًا؟

هذا عندما تظهر تغيير "ناجح" في واجهة المستخدم مباشرة بعد إجراء المستخدم — قبل أن يؤكد الخادم ذلك فعليًا.

يبدو سهلاً لكن إدارة منطق التراجع عند فشل الطلب يمكن أن تكون صداعًا حقيقيًا. 🤕

أين تخزن حالة التفاؤل المؤقتة؟ كيف تدمجها ثم تتراجع عنها؟ 🔄

يقدم React 19 شيئًا أكثر نظافة لهذا.

useActionState: طريقة جديدة للتعامل مع إرسال النماذج

أحد أكثر الإضافات إثارة في React 19 هو خطاف ==*useActionState *==.

يبسط منطق النموذج من خلال الجمع بين إرسال النموذج غير المتزامن، وإدارة الحالة، وإشارة التحميل — كل ذلك في مكان واحد. 🎯

const [state, actionFunction, isPending] = useActionState(fn, initialState);

إليك ما يحدث:

• ==fn== — الدالة غير المتزامنة التي تتعامل مع إرسال النموذج

• ==initialState== — القيمة الأولية لحالة النموذج

• ==isPending== — علامة مدمجة توضح ما إذا كان الإرسال قيد التقدم

  \

كيف يعمل

الدالة غير المتزامنة التي تمرر إلى ==useActionState== تستقبل تلقائيًا وسيطتين:

const action = async (previousState, formData) => { const message = formData.get('message'); try { await sendMessage(message); return { success: true, error: null }; } catch (error) { return { success: false, error }; } };

ثم تربطها بنموذجك كما يلي:

const [state, actionFunction, isPending] = useActionState(action, { success: false, error: null, }); return <form action={actionFunction}> ... </form>;

\n الآن، عند إرسال النموذج، يقوم React تلقائيًا بما يلي:

• استدعاء ==action== غير المتزامنة
• تحديث **==*state *==** بالنتيجة المرجعة
• تتبع عملية الإرسال عبر ==isPending==

لا مزيد من ==useState, preventDefault,== اليدوي أو منطق إعادة الضبط — React يتولى كل ذلك. ⚙️

ملاحظة حول startTransition

إذا قررت تشغيل إجراء النموذج يدويًا (مثلاً، خارج خاصية action للنموذج)، قم بتغليفه بـ ==startTransition==:

const handleSubmit = async (formData) => { await doSomething(); startTransition(() => { actionFunction(formData); }); };

وإلا، سيحذرك React من أن تحديثًا غير متزامن حدث خارج انتقال، و==isPending== لن يتم تحديثه بشكل صحيح.

لماذا ستحب useActionState

• ✅ لا حاجة لخطافات ==*useState *== متعددة
• ✅ حالة معلقة تلقائية (==isPending==)
• ✅ لا حاجة لـ ==event.preventDefault==()
• ✅ إعادة ضبط النموذج تلقائيًا بعد الإرسال الناجح

منطق النموذج يشعر بالإعلانية مرة أخرى — فقط صف الإجراء، وليس التوصيلات.

useFormStatus: لا مزيد من تمرير الخصائص عبر الطبقات

خطاف قوي آخر جديد — ==useFormStatus== — يحل مشكلة تمرير الخصائص في أشجار النماذج.

import { useFormStatus } from 'react-dom'; const { pending, data, method, action } = useFormStatus();

يمكنك استدعاء هذا الخطاف داخل أي مكون فرعي للنموذج، وسيتصل تلقائيًا بحالة النموذج الأصلي.

مثال

function SubmitButton() { const { pending, data } = useFormStatus(); const message = data ? data.get('message') : ''; return ( <button type="submit" disabled={pending}> {pending ? `Sending ${message}...` : 'Send'} </button> ); } function MessageForm() { return ( <form action={submitMessage}> <SubmitButton /> </form> ); }

:::info لاحظ أن ==SubmitButton== يمكنه الوصول إلى بيانات النموذج وحالة الانتظار — دون تمرير أي خصائص.

:::

أمور يجب تذكرها

• ❌ لا يعمل إذا استدعيته في نفس المكون حيث يتم عرض النموذج. يجب أن يكون داخل مكون فرعي.
• ❌ لن يستجيب للنماذج التي تستخدم معالجات onSubmit — يجب أن يكون نموذجًا بخاصية ***action ***.
• ⚠️ حتى الآن، formMethod التجاوزات داخل الأزرار أو المدخلات (مثل، formMethod="get") لا تعمل كما هو متوقع — النموذج لا يزال يستخدم الطريقة الرئيسية. \n 🐛 لقد فتحتمشكلة على GitHub لتتبع هذا الخلل.

لماذا useFormStatus مهم

🧩 يلغي تمرير الخصائص في أشجار النماذج \n ⚡ يجعل القرارات السياقية داخل المكونات الفرعية ممكنة \n 💡 يحافظ على المكونات منفصلة وأكثر نظافة

useOptimistic: واجهة مستخدم متفائلة إعلانية

أخيرًا، دعونا نتحدث عن إحدى إضافاتي المفضلة — ==useOptimistic==.

يوفر دعمًا مدمجًا لتحديثات واجهة المستخدم المتف