React Academy · पाठ

तुरंत प्रतिक्रिया के लिए useOptimistic

useOptimistic से सर्वर म्यूटेशन के चलते रहने के दौरान आशावादी UI अपडेट दिखाएँ।

पाठ 4, कुल 4 में से13 चरण

तुरंत प्रतिक्रिया के लिए useOptimistic, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

स्वागत है

इस पाठ में आप React 19 के useOptimistic हुक का उपयोग करके सर्वर म्यूटेशन के चलने के दौरान तुरंत आशावादी यूआई परिवर्तन दिखाएँगे और विफलता होने पर अपने-आप पिछली स्थिति में लौटेंगे।

आशावादी यूआई क्या है

आशावादी यूआई का अर्थ है कि सर्वर म्यूटेशन के सफल होने की अपेक्षा करके, सर्वर की प्रतिक्रिया की प्रतीक्षा किए बिना यूआई को तुरंत अपडेट करना। यदि यह विफल हो जाए, तो आप पिछली स्थिति में लौटते हैं।

useOptimistic की मूल बातें

useOptimistic वास्तविक स्थिति और एक अपडेटर फ़ंक्शन स्वीकार करता है। यह आशावादी स्थिति और आशावादी अपडेट लागू करने वाला एक फ़ंक्शन लौटाता है।
'use client';
import { useOptimistic } from 'react';

const [optimisticLikes, addOptimisticLike] = useOptimistic(
  likes,                      // actual state from server
  (state, newLike) => [...state, newLike] // how to apply optimistic update
);

Like बटन का उदाहरण

जब उपयोगकर्ता Like पर क्लिक करे, तो addOptimisticLike के माध्यम से यूआई में नया Like तुरंत दिखाएँ और फिर वास्तविक अनुरोध भेजें। अनुरोध विफल होने पर आशावादी स्थिति अपने-आप वास्तविक स्थिति में लौट जाती है।
async function handleLike() {
  addOptimisticLike({ id: Date.now(), user: currentUser });
  await likePost(postId); // server action
}

आशावादी स्थिति कहाँ रहती है

ट्रांज़िशन के दौरान optimisticLikes आशावादी मान दिखाता है। सर्वर की प्रतिक्रिया आने और वास्तविक `likes` स्थिति के अपडेट होने पर (पुनः सत्यापन के माध्यम से), useOptimistic अपने-आप वास्तविक स्थिति के साथ सिंक्रोनाइज़ हो जाता है।

आशावादी आइटम पर लंबित संकेतक

आशावादी आइटम को दृश्य रूप से चिह्नित करें (जैसे, उन्हें थोड़ा धुंधला दिखाएँ), ताकि उपयोगकर्ताओं को पता रहे कि वे लंबित हैं। आशावादी अपडेट में `pending: true` फ़्लैग जोड़कर उसके अनुसार शैली लागू कर सकते हैं।
const [optimisticMessages, addOptimistic] = useOptimistic(
  messages,
  (state, msg) => [...state, { ...msg, pending: true }]
);

// Render
{optimisticMessages.map(m => (
  <div key={m.id} style={{ opacity: m.pending ? 0.6 : 1 }}>{m.text}</div>
))}

ट्रांज़िशन के भीतर उपयोग

useOptimistic केवल React ट्रांज़िशन (startTransition या useTransition) के भीतर काम करता है। React 19 के साथ Server Actions का उपयोग करने पर यह अपने-आप संभाल लिया जाता है।
'use client';
import { startTransition } from 'react';

const handleSubmit = (data) => {
  startTransition(async () => {
    addOptimistic(data);
    await serverAction(data);
  });
};

चैट संदेश भेजने का उदाहरण

सर्वर के उसे सहेजने के दौरान भेजे गए संदेश को चैट सूची में तुरंत दिखाएँ। संदेश तुरंत 'Sending...' स्थिति के साथ दिखाई दे, फिर सर्वर की पुष्टि होने पर 'Sent' में बदल जाए।

त्रुटि पर वापस लौटने का व्यवहार

यदि सर्वर ऐक्शन विफल हो जाता है (अपवाद उत्पन्न करता है या अस्वीकार हो जाता है), तो useOptimistic आशावादी मान को अपने-आप हटा देता है और अंतिम वास्तविक स्थिति में लौट जाता है। आपको वापस लौटने की प्रक्रिया स्वयं लागू करने की आवश्यकता नहीं है।

useOptimistic बनाम मैन्युअल आशावादी अपडेट

useOptimistic से पहले, आप दो स्थिति चर (वास्तविक और आशावादी) प्रबंधित करते थे और catch ब्लॉक में मैन्युअल रूप से पिछली स्थिति में लौटते थे। useOptimistic इसे अपने-आप वापस लौटने वाले एकल हुक में समेट देता है।

त्वरित जाँच

यदि उसे शुरू करने वाला सर्वर ऐक्शन विफल हो जाए, तो आशावादी स्थिति का क्या होता है?

पुनरावृत्ति

useOptimistic(actualState, updater), [optimisticState, addOptimistic] लौटाता है। तुरंत प्रतिक्रिया के लिए सर्वर ऐक्शन से पहले addOptimistic कॉल करें। ऐक्शन विफल होने पर React अपने-आप पिछली स्थिति में लौट जाता है। यह React ट्रांज़िशन के भीतर काम करता है।

पाठ्यक्रम पूरा हुआ

बधाई हो! आपने **Server Components और React 19 Features** पूरा कर लिया है। अब आप आधुनिक React विकास के लिए RSCs, use() हुक, Actions, useActionState और useOptimistic को समझते हैं।
शुरुआत निःशुल्क

एआई शिक्षक के साथ React सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
88
पाठ
324

अक्सर पूछे जाने वाले प्रश्न

क्या “तुरंत प्रतिक्रिया के लिए useOptimistic” पाठ निःशुल्क है?

हाँ—“तुरंत प्रतिक्रिया के लिए useOptimistic” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“तुरंत प्रतिक्रिया के लिए useOptimistic” में मैं क्या सीखूँगा?

useOptimistic से सर्वर म्यूटेशन के चलते रहने के दौरान आशावादी UI अपडेट दिखाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“तुरंत प्रतिक्रिया के लिए useOptimistic” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. React Server Components की व्याख्या
  2. एसिंक्रोनस संसाधनों के लिए use() हुक
  3. React Actions और useActionState
  4. तुरंत प्रतिक्रिया के लिए useOptimistic
← React Academy पर वापस जाएँ