المقدمة

ما هو useFormStatus Hook ؟

بناء على تعريفه في موقع React فهو عبارة عن : "hook يقوم بإعطاء معلومات عن آخر عملية إرسال بيانات للـform" وهو عبارة عن بديل لعملية استخدام الـ loading state لعرض أيقونة التحميل (loading spinner) وغيرها من المميزات التي نستعرضها وكيفية استخدامه وحالات استخدامه.

القيم التي يقوم بإرجاعها

يقوم بإرجاع 4 قيم وهي : pending - وهي قيمة ثنائية (boolean) ، وتستخدم لتحديد حالة الـsubmission للـ form بمعنى أنه إذا تم إرسال البيانات فستكون قيمتها false أما إذا لم تتم العملية فهي true.

data - وهو object يحتوي على بيانات الـform ، وقد تكون قيمته null وفق لشرطين اثنين وهما :

1- أن يكون الـ parent هو form بمعنى أنه لا يمكن استخدام هذا الhook إلا إذا كان هو child component لـ parent وهي الـ form.

2- أن يكون هناك active submisson ، بمعنى أن البيانات ستكون متاحة فقط في حالة قيمة الـpending == true ، اي عندما يتم الضغط على زر submit

method - وهي الـ HTTP methods (get & post) .

action - وهي الدالة التي يتم تنفيذها بواسطة الـform prop (action) ، في حالة لم يتم إرسال action prop للـform فإنه سيتم إرجاع null.

طريقة الكتابة

Copytypescript
1 const {pending,data,method,action} = useFormStatus();

الإستخدامات الشائعة

تعطيل زر الـsubmit

وهي الأكثر شيوعاً ، وهي بديل لـ استخدام loading state

قبل الاستخدام

Copytypescript
1export default function Form(){
2 // init loading state
3const [loading,setLoading] = useState(false)
4// sumbit function
5async funciton handleSubmit(){
6try{
7 //handle logic...
8 awiat doServerTask()
9 }
10 catch(errro){
11 // handle the error
12 {
13 finally{
14 // update loading state
15 setLoading(true)
16 }
17 }
18
19 return(
20 <>
21<form action={handleSubmit}>
22  <button type='submit' disabled={loading}
23 {lodaing ? "submitting" : "submit"}
24   </button>
25 </form>
26 </>
27)
28 }

بعد الإستخدام

Copytypescript
1 // Parent Component
2export default funtion Form(){
3// action 
4async function handleSubmit(){
5await doServerLogic();
6 }
7
8 return (
9<form action={handleSubmit}>
10// Note : the hook only work if the parent only <form>
11// i.e : it will not work if used in the same component level
12
13{/* useFormStatus works here because SubmitBtn is a child */}
14 <SubmitBtn/>
15 </form>
16)
17 }
18
19 // Child Component 
20 function SubmitBtn(){
21 const {pending} = useFormStatus();
22 return(
23 <>
24 <input type='text'/>
25 <button type="submit" disabled={pending}>
26   {pending ? "submitting" : "submit"}
27   <button/>
28   </>
29   )
30   }

لماذا يُعد استخدام هذا الـhook أفضل ؟

أولاً : لا تحتاج إلى استخدام useState أو useEffect أو استخدام الـloading state ثانياً : الform تقوم بـ التعامل مع البيانات والـsubmit button يتعامل مع بياناته الخاصة (speration of concern)