إدارة حالة إرسال النموذج باستخدام هوك useFormStatus

عندما يُرسل المستخدمون نموذج، يتوقعون ردود فعل - مثل زر مُعطّل، أو رسالة "جاري الإرسال...". في إصدارات React القديمة، كان المطورون يُديرون ذلك يدويًا باستخدام متغيرات حالة إضافية مثلisSubmitting يقدم React 19 إطار عمل Actions جديدًا، مما يجعل التعامل مع نموذج تصريحيًا وسلسًا.

تعتبر إجراءات React عبارة عن وظائف مرتبطة مباشرة بالنماذج عبرaction الخاصية. عندما يُرسل المستخدم نموذج، يستدعي React هذه الدالة تلقائيًا - على غرار آلية عمل إجراءات خادم - ويتتبع تقدمها. هذه الآلية المدمجة تعني أننا لم نعد بحاجة إلى كتابة معالجات أحداث خاصة بنا أو إدارة الحالات المعلقة يدويًا.

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

فهم وظائف الإجراء في React 19

في React 19، تم تقديم إطار عمل جديد لإجراءات لجعل عمليات إرسال نموذج تصريحية. دالة الإجراء هي دالة JavaScript تُرفق بـ<form> باستخدامaction الخاصية. عند إرسال نموذج ، يستدعي React هذه الدالة تلقائيًا مع بيانات نموذج — دون الحاجة إلى إجراء يدويonSubmit المعالجات أو إدارة الأحداث. ...