useActionState और useFormStatus

useActionState(action, initialState) रिएक्ट 19 का एक हुक है, जो सबमिशन के बीच उसकी स्थिति पर नज़र रखने के लिए सर्वर ऐक्शन को लपेटता है। इसमें ऐक्शन फ़ंक्शन और प्रारंभिक स्थिति मान लिया जाता है और यह एक ऐसा टपल लौटाता है जिसका उपयोग फ़ॉर्म के पूरे अनुभव को नियंत्रित करने के लिए किया जा सकता है।

हुक [state, formAction, isPending] लौटाता है। state में ऐक्शन का सबसे हाल का लौटाया गया मान रहता है, जो शुरुआत में null या आपका प्रारंभिक मान होता है। formAction वह लपेटा हुआ ऐक्शन है जिसे फ़ॉर्म को देना होता है। ऐक्शन के सर्वर पर चलते समय isPending का मान true होता है।

हर बार फ़ॉर्म सबमिट होने पर सर्वर ऐक्शन चलता है और उसका लौटाया गया मान नई state बन जाता है। पहले रेंडर पर state का मान initialState के बराबर होता है। इससे पिछले सबमिशन हुए हैं या नहीं और उनसे क्या परिणाम मिले, इसके आधार पर अलग-अलग यूआई दिखाना आसान हो जाता है।

यदि सर्वर ऐक्शन { errors: { email: 'Invalid email' } } लौटाता है, तो आप त्रुटि सीधे दिखा सकते हैं: {state.errors?.email && <p>{state.errors.email}</p>}। स्थिति रीरेंडर के बीच बनी रहती है, इसलिए अगला सफल सबमिशन स्थिति को बदलने तक त्रुटि संदेश दिखाई देता रहता है।

जब ऐक्शन { success: true } लौटाता है, तो घटक सफलता संदेश रेंडर कर सकता है: {state?.success && <p>Form submitted!</p>}। स्थिति के मान के आधार पर फ़ॉर्म को सशर्त रूप से छिपाया जा सकता है या उसकी जगह सफलता संदेश दिखाया जा सकता है।

useFormStatus() एक ऐसा हुक है जो सबसे निकटतम पूर्वज <form> तत्व की लंबित स्थिति पढ़ता है। यह एक ऐसी ऑब्जेक्ट लौटाता है जिसमें { pending: boolean } शामिल होता है। इस हुक का उपयोग फ़ॉर्म के अंदर किसी बाल घटक में करना आवश्यक है — उस घटक में नहीं जो स्वयं फ़ॉर्म को रेंडर करता है।

useFormStatus का उपयोग फ़ॉर्म के अंदर ही किया जाना आवश्यक है, क्योंकि हुक अपने ऊपर मौजूद रिएक्ट ट्री से फ़ॉर्म का संदर्भ पढ़ता है। यदि इसे उसी घटक में कॉल किया जाए जो फ़ॉर्म को रेंडर करता है, तो यह फ़ॉर्म का वंशज नहीं बल्कि उसका समान-स्तरीय घटक होगा और उसे फ़ॉर्म की स्थिति तक पहुँच नहीं मिलेगी।

मानक तरीका यह है कि सबमिट बटन को उसके अपने घटक में अलग कर दिया जाए: function SubmitButton() { const { pending } = useFormStatus(); return <button disabled={pending}>Submit</button>; }। फिर इस घटक को फ़ॉर्म के अंदर रखा जाता है, जिससे इसे फ़ॉर्म की लंबित स्थिति तक पहुँच मिलती है।

सबमिट बटन पर disabled={pending} सेट करने से दोहरी सबमिशन रुक जाती है। जब उपयोगकर्ता सबमिट पर क्लिक करता है और सर्वर ऐक्शन चल रहा होता है, तब pending का मान true होता है, बटन अक्षम हो जाता है और उस पर क्लिक नहीं किया जा सकता। ऐक्शन पूरा होने पर pending फिर false हो जाता है और बटन दोबारा सक्षम हो जाता है।

फ़ॉर्म उपयोगकर्ता-अनुभव का पूरा तरीका दोनों हुक को साथ मिलाता है: फ़ॉर्म घटक में useActionState ऐक्शन के परिणाम पर नज़र रखता है और formAction उपलब्ध कराता है, जबकि बाल SubmitButton घटक के अंदर useFormStatus लंबित स्थिति पर नज़र रखता है। दोनों मिलकर मान्यकरण त्रुटियों का प्रदर्शन और तुरंत प्रतिक्रिया देने वाला सबमिट बटन उपलब्ध कराते हैं।

और भी तुरंत प्रतिक्रिया के लिए useOptimistic, useActionState के साथ काम करता है। सर्वर के उत्तर देने से पहले ही आप अपेक्षित परिणाम के साथ यूआई को तुरंत अपडेट कर देते हैं और वास्तविक उत्तर आने पर उसका मिलान कर लेते हैं। यह तरीका पसंद बटन, कार्य-सूचियों और तुरंत प्रतिक्रिया वाली अन्य इंटरैक्टिव सुविधाओं में आम है।

useActionState(action, initialState), सर्वर ऐक्शन के परिणामों पर नज़र रखने के लिए [state, formAction, isPending] लौटाता है। स्थिति में ऐक्शन का लौटाया गया मान रहता है, जिससे सीधे त्रुटि और सफलता दिखाना संभव होता है। useFormStatus() फ़ॉर्म के बाल घटकों के अंदर { pending } उपलब्ध कराता है, जिससे तुरंत प्रतिक्रिया देने वाले सबमिट बटन बनाए जा सकते हैं। दोनों हुक मिलकर फ़ॉर्म का पूरा और सुलभ अनुभव तैयार करते हैं।