// एक fetchData फ़ंक्शन की कल्पना करें जो एक प्रॉमिस लौटाता है
function fetchUserData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ name: 'Alice' });
    }, 2000);
  });
}

// एक काल्पनिक सस्पेंस-सक्षम डेटा फ़ेचिंग हुक
function useUserData() {
  const data = fetch(url);
  if (data.status === 'pending') {
    throw new Promise(resolve => {
      // सस्पेंस इसी को इंटरसेप्ट करता है
      setTimeout(() => resolve(null), 2000); 
    });
  }
  return data.value;
}

function UserProfile() {
  const userData = useUserData(); // यह कॉल सस्पेंड हो सकती है
  return 
Welcome, {userData.name}!
;
}

function App() {
  return (
    Loading user...

2. स्वचालित बैचिंग

बैचिंग कई स्टेट अपडेट को एक ही री-रेंडर में समूहित करने की प्रक्रिया है। परंपरागत रूप से, रिएक्ट केवल उन अपडेट को बैच करता था जो इवेंट हैंडलर के भीतर होते थे। इवेंट हैंडलर के बाहर शुरू किए गए अपडेट (जैसे, प्रॉमिस या `setTimeout` के भीतर) को बैच नहीं किया जाता था, जिससे अनावश्यक री-रेंडर होते थे।

यह कॉन्करेंसी के साथ कैसे काम करता है: कॉन्करेंट मोड के साथ, रिएक्ट स्वचालित रूप से सभी स्टेट अपडेट को बैच करता है, चाहे वे कहीं से भी उत्पन्न हों। इसका मतलब है कि यदि आपके पास कई स्टेट अपडेट तेजी से हो रहे हैं (जैसे, कई एसिंक्रोनस ऑपरेशनों के पूरा होने से), तो रिएक्ट उन्हें समूहित करेगा और एक ही री-रेंडर करेगा, जिससे प्रदर्शन में सुधार होगा और कई रेंडरिंग चक्रों का ओवरहेड कम होगा।

उदाहरण: मान लीजिए कि आप दो अलग-अलग API से डेटा फ़ेच कर रहे हैं। एक बार दोनों पूरे हो जाने पर, आप स्टेट के दो अलग-अलग हिस्सों को अपडेट करते हैं। पुराने रिएक्ट संस्करणों में, यह दो री-रेंडर को ट्रिगर कर सकता है। कॉन्करेंट मोड में, ये अपडेट बैच किए जाते हैं, जिसके परिणामस्वरूप एक ही, अधिक कुशल री-रेंडर होता है।

3. ट्रांज़िशन

ट्रांज़िशन एक नई अवधारणा है जिसे तत्काल और गैर-तत्काल अपडेट के बीच अंतर करने के लिए पेश किया गया है। यह इंटरप्टिबल रेंडरिंग को सक्षम करने के लिए एक मुख्य तंत्र है।

तत्काल अपडेट: ये वे अपडेट हैं जिनके लिए तत्काल प्रतिक्रिया की आवश्यकता होती है, जैसे कि इनपुट फ़ील्ड में टाइप करना, बटन पर क्लिक करना, या सीधे UI तत्वों में हेरफेर करना। उन्हें तत्काल महसूस होना चाहिए।

ट्रांज़िशन अपडेट: ये वे अपडेट हैं जिनमें अधिक समय लग सकता है और तत्काल प्रतिक्रिया की आवश्यकता नहीं होती है। उदाहरणों में एक लिंक पर क्लिक करने के बाद एक नया पृष्ठ रेंडर करना, एक बड़ी सूची को फ़िल्टर करना, या संबंधित UI तत्वों को अपडेट करना शामिल है जो सीधे क्लिक का जवाब नहीं देते हैं। इन अपडेट को बाधित किया जा सकता है।

यह कॉन्करेंसी के साथ कैसे काम करता है: `startTransition` API का उपयोग करके, आप कुछ स्टेट अपडेट को ट्रांज़िशन के रूप में चिह्नित कर सकते हैं। रिएक्ट का शेड्यूलर तब इन अपडेट को कम प्राथमिकता के साथ मानेगा और यदि कोई अधिक जरूरी अपडेट होता है तो उन्हें बाधित कर सकता है। यह सुनिश्चित करता है कि जब एक गैर-जरूरी अपडेट (जैसे एक बड़ी सूची को रेंडर करना) प्रगति पर है, तो जरूरी अपडेट (जैसे एक सर्च बार में टाइप करना) को प्राथमिकता दी जाती है, जिससे UI प्रतिक्रियाशील बना रहता है।

वैश्विक उदाहरण: एक यात्रा बुकिंग वेबसाइट पर विचार करें। जब कोई उपयोगकर्ता एक नया गंतव्य चुनता है, तो यह अपडेट की एक श्रृंखला को ट्रिगर कर सकता है: उड़ान डेटा फ़ेच करना, होटल की उपलब्धता को अपडेट करना, और एक नक्शा रेंडर करना। यदि उपयोगकर्ता प्रारंभिक अपडेट के प्रोसेस होने के दौरान तुरंत यात्रा की तारीखें बदलने का फैसला करता है, तो `startTransition` API रिएक्ट को उड़ान/होटल अपडेट को रोकने, तत्काल तारीख परिवर्तन को प्रोसेस करने, और फिर नई तारीखों के आधार पर उड़ान/होटल फ़ेच को फिर से शुरू करने या फिर से शुरू करने की अनुमति देता है। यह जटिल अपडेट अनुक्रम के दौरान UI को फ्रीज होने से रोकता है।

कोड स्निपेट (उदाहरण):

import { useState, useTransition } from 'react';

function SearchResults() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleQueryChange = (e) => {
    const newQuery = e.target.value;
    setQuery(newQuery);

    // इस अपडेट को एक ट्रांज़िशन के रूप में चिह्नित करें
    startTransition(() => {
      // परिणामों को फ़ेच करने का अनुकरण करें, इसे बाधित किया जा सकता है
      fetchResults(newQuery).then(res => setResults(res));
    });
  };

  return (
    

      
      {isPending && 
Loading results...
}
      

        {results.map(item => (
          
{item.name}
        ))}
      
    
  );
}

4. लाइब्रेरी और इकोसिस्टम इंटीग्रेशन

कॉन्करेंट मोड के लाभ केवल रिएक्ट की मुख्य विशेषताओं तक ही सीमित नहीं हैं। पूरा इकोसिस्टम अनुकूल हो रहा है। रिएक्ट के साथ इंटरैक्ट करने वाली लाइब्रेरी, जैसे कि रूटिंग समाधान या स्टेट मैनेजमेंट टूल, भी एक सहज अनुभव प्रदान करने के लिए कॉन्करेंसी का लाभ उठा सकती हैं।

उदाहरण: एक रूटिंग लाइब्रेरी पृष्ठों के बीच नेविगेट करने के लिए ट्रांज़िशन का उपयोग कर सकती है। यदि कोई उपयोगकर्ता वर्तमान पृष्ठ के पूरी तरह से रेंडर होने से पहले नेविगेट कर जाता है, तो रूटिंग अपडेट को निर्बाध रूप से बाधित या रद्द किया जा सकता है, और नया नेविगेशन प्राथमिकता ले सकता है। यह सुनिश्चित करता है कि उपयोगकर्ता हमेशा सबसे अद्यतित दृश्य देखता है जो उसने चाहा था।

कॉन्करेंट फीचर्स को कैसे सक्षम और उपयोग करें

जबकि कॉन्करेंट मोड एक मौलिक बदलाव है, इसकी सुविधाओं को सक्षम करना आम तौर पर सीधा है और अक्सर न्यूनतम कोड परिवर्तनों की आवश्यकता होती है, खासकर नए एप्लिकेशन के लिए या सस्पेंस और ट्रांज़िशन जैसी सुविधाओं को अपनाते समय।

1. रिएक्ट संस्करण

कॉन्करेंट फीचर्स रिएक्ट 18 और उसके बाद के संस्करणों में उपलब्ध हैं। सुनिश्चित करें कि आप एक संगत संस्करण का उपयोग कर रहे हैं:

npm install react@latest react-dom@latest

2. रूट API (`createRoot`)

कॉन्करेंट फीचर्स को चुनने का प्राथमिक तरीका अपने एप्लिकेशन को माउंट करते समय नए `createRoot` API का उपयोग करना है:

// index.js or main.jsx
import ReactDOM from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render();

`createRoot` का उपयोग करने से स्वचालित रूप से सभी कॉन्करेंट फीचर्स सक्षम हो जाते हैं, जिसमें स्वचालित बैचिंग, ट्रांज़िशन और सस्पेंस शामिल हैं।

नोट: पुराना `ReactDOM.render` API कॉन्करेंट फीचर्स का समर्थन नहीं करता है। `createRoot` पर माइग्रेट करना कॉन्करेंसी को अनलॉक करने के लिए एक महत्वपूर्ण कदम है।

3. सस्पेंस लागू करना

जैसा कि पहले दिखाया गया है, सस्पेंस को उन कंपोनेंट्स को <Suspense> बाउंड्री के साथ रैप करके लागू किया जाता है जो एसिंक्रोनस ऑपरेशन करते हैं और एक fallback प्रॉप प्रदान करते हैं।

सर्वोत्तम अभ्यास:

• लोडिंग स्टेट्स को सूक्ष्मता से प्रबंधित करने के लिए <Suspense> बाउंड्री को नेस्ट करें।
• क्लीनर डेटा फ़ेचिंग लॉजिक के लिए सस्पेंस के साथ एकीकृत कस्टम हुक्स का उपयोग करें।
• रिले या अपोलो क्लाइंट जैसी लाइब्रेरी का उपयोग करने पर विचार करें, जिनमें सस्पेंस के लिए प्रथम श्रेणी का समर्थन है।

4. ट्रांज़िशन का उपयोग करना (`startTransition`)

गैर-तत्काल UI अपडेट की पहचान करें और उन्हें startTransition के साथ रैप करें।

कब उपयोग करें:

• उपयोगकर्ता के टाइप करने के बाद खोज परिणामों को अपडेट करना।
• रूट्स के बीच नेविगेट करना।
• बड़ी सूचियों या तालिकाओं को फ़िल्टर करना।
• अतिरिक्त डेटा लोड करना जो उपयोगकर्ता इंटरैक्शन को तुरंत प्रभावित नहीं करता है।

उदाहरण: एक तालिका में प्रदर्शित बड़े डेटासेट की जटिल फ़िल्टरिंग के लिए, आप फ़िल्टर क्वेरी स्टेट सेट करेंगे और फिर तालिका पंक्तियों की वास्तविक फ़िल्टरिंग और री-रेंडरिंग के लिए startTransition को कॉल करेंगे। यह सुनिश्चित करता है कि यदि उपयोगकर्ता जल्दी से फ़िल्टर मानदंडों को फिर से बदलता है, तो पिछली फ़िल्टरिंग ऑपरेशन को सुरक्षित रूप से बाधित किया जा सकता है।

वैश्विक दर्शकों के लिए इंटरप्टिबल रेंडरिंग के लाभ

इंटरप्टिबल रेंडरिंग और कॉन्करेंट मोड के फायदे तब और बढ़ जाते हैं जब विभिन्न नेटवर्क स्थितियों और डिवाइस क्षमताओं वाले वैश्विक उपयोगकर्ता आधार पर विचार किया जाता है।

• बेहतर कथित प्रदर्शन: धीमे कनेक्शन या कम शक्तिशाली उपकरणों पर भी, UI प्रतिक्रियाशील बना रहता है। उपयोगकर्ताओं को एक तेज़ एप्लिकेशन का अनुभव होता है क्योंकि महत्वपूर्ण इंटरैक्शन कभी भी लंबे समय तक ब्लॉक नहीं होते हैं।
• बढ़ी हुई पहुंच: उपयोगकर्ता इंटरैक्शन को प्राथमिकता देकर, एप्लिकेशन उन उपयोगकर्ताओं के लिए अधिक सुलभ हो जाते हैं जो सहायक प्रौद्योगिकियों पर भरोसा करते हैं या जिन्हें संज्ञानात्मक हानि हो सकती है जो एक लगातार प्रतिक्रियाशील इंटरफ़ेस से लाभान्वित होते हैं।
• कम हुई निराशा: वैश्विक उपयोगकर्ता, जो अक्सर अलग-अलग समय क्षेत्रों में और विभिन्न तकनीकी सेटअपों के साथ काम करते हैं, उन एप्लिकेशन की सराहना करते हैं जो फ्रीज या लैग नहीं होते हैं। सहज UX उच्च जुड़ाव और संतुष्टि की ओर ले जाता है।
• बेहतर संसाधन प्रबंधन: मोबाइल उपकरणों या पुराने हार्डवेयर पर, जहां CPU और मेमोरी अक्सर बाधित होती है, इंटरप्टिबल रेंडरिंग रिएक्ट को संसाधनों का कुशलतापूर्वक प्रबंधन करने की अनुमति देती है, महत्वपूर्ण कार्यों के लिए रास्ता बनाने के लिए गैर-आवश्यक कार्यों को रोकती है।
• डिवाइसेज में सुसंगत अनुभव: चाहे कोई उपयोगकर्ता सिलिकॉन वैली में हाई-एंड डेस्कटॉप पर हो या दक्षिण पूर्व एशिया में बजट स्मार्टफोन पर, एप्लिकेशन की मुख्य प्रतिक्रियाशीलता को बनाए रखा जा सकता है, जिससे हार्डवेयर और नेटवर्क क्षमताओं में अंतर को पाटा जा सकता है।

दुनिया भर के छात्रों द्वारा उपयोग किए जाने वाले एक भाषा सीखने वाले ऐप पर विचार करें। यदि एक छात्र एक नया पाठ डाउनलोड कर रहा है (एक संभावित लंबा कार्य) जबकि दूसरा एक त्वरित शब्दावली प्रश्न का उत्तर देने की कोशिश कर रहा है, तो इंटरप्टिबल रेंडरिंग सुनिश्चित करता है कि शब्दावली प्रश्न का उत्तर तुरंत दिया जाए, भले ही डाउनलोड जारी हो। यह शैक्षिक उपकरणों के लिए महत्वपूर्ण है जहां सीखने के लिए तत्काल प्रतिक्रिया महत्वपूर्ण है।

संभावित चुनौतियां और विचार

जबकि कॉन्करेंट मोड महत्वपूर्ण लाभ प्रदान करता है, इसे अपनाने में एक सीखने की अवस्था और कुछ विचार भी शामिल हैं:

• डीबगिंग: एसिंक्रोनस और इंटरप्टिबल ऑपरेशनों की डीबगिंग सिंक्रोनस कोड की डीबगिंग की तुलना में अधिक चुनौतीपूर्ण हो सकती है। निष्पादन के प्रवाह को समझना और कार्यों को कब रोका या फिर से शुरू किया जा सकता है, इसके लिए सावधानीपूर्वक ध्यान देने की आवश्यकता है।
• मानसिक मॉडल शिफ्ट: डेवलपर्स को अपनी सोच को विशुद्ध रूप से अनुक्रमिक निष्पादन मॉडल से अधिक समवर्ती, इवेंट-संचालित दृष्टिकोण में समायोजित करने की आवश्यकता है। startTransition और सस्पेंस के निहितार्थों को समझना महत्वपूर्ण है।
• बाहरी लाइब्रेरी: सभी तृतीय-पक्ष लाइब्रेरी को कॉन्करेंसी-जागरूक होने के लिए अपडेट नहीं किया गया है। पुरानी लाइब्रेरी का उपयोग करना जो ब्लॉकिंग ऑपरेशन करती हैं, अभी भी UI फ्रीज का कारण बन सकती हैं। यह सुनिश्चित करना महत्वपूर्ण है कि आपकी निर्भरताएँ संगत हैं।
• स्टेट मैनेजमेंट: जबकि रिएक्ट की अंतर्निहित कॉन्करेंसी सुविधाएँ शक्तिशाली हैं, जटिल स्टेट मैनेजमेंट परिदृश्यों को यह सुनिश्चित करने के लिए सावधानीपूर्वक विचार करने की आवश्यकता हो सकती है कि सभी अपडेट को समवर्ती प्रतिमान के भीतर सही और कुशलता से संभाला जाए।

रिएक्ट कॉन्करेंसी का भविष्य

रिएक्ट की कॉन्करेंसी की यात्रा जारी है। टीम शेड्यूलर को परिष्कृत करना, नए API पेश करना और डेवलपर अनुभव में सुधार करना जारी रखे हुए है। ऑफस्क्रीन API जैसी सुविधाएँ (घटकों को उपयोगकर्ता-कथित UI को प्रभावित किए बिना रेंडर करने की अनुमति देना, प्री-रेंडरिंग या पृष्ठभूमि कार्यों के लिए उपयोगी) समवर्ती रेंडरिंग के साथ क्या हासिल किया जा सकता है, इसकी संभावनाओं का और विस्तार कर रही हैं।

जैसे-जैसे वेब तेजी से जटिल होता जा रहा है और प्रदर्शन और प्रतिक्रिया के लिए उपयोगकर्ता की उम्मीदें बढ़ती जा रही हैं, समवर्ती रेंडरिंग केवल एक अनुकूलन नहीं बल्कि आधुनिक, आकर्षक एप्लिकेशन बनाने के लिए एक आवश्यकता बन रही है जो वैश्विक दर्शकों को पूरा करती है।

निष्कर्ष

रिएक्ट कॉन्करेंट मोड और इसकी इंटरप्टिबल रेंडरिंग की मूल अवधारणा इस बात में एक महत्वपूर्ण विकास का प्रतिनिधित्व करती है कि हम उपयोगकर्ता इंटरफ़ेस कैसे बनाते हैं। रिएक्ट को रेंडरिंग कार्यों को रोकने, फिर से शुरू करने और प्राथमिकता देने में सक्षम बनाकर, हम ऐसे एप्लिकेशन बना सकते हैं जो न केवल प्रदर्शनकारी हैं, बल्कि अविश्वसनीय रूप से प्रतिक्रियाशील और लचीले भी हैं, यहां तक कि भारी भार या बाधित वातावरण में भी।

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

सस्पेंस और ट्रांज़िशन जैसी सुविधाओं को अपनाना, और नए रूट API में माइग्रेट करना, रिएक्ट की पूरी क्षमता को अनलॉक करने की दिशा में महत्वपूर्ण कदम हैं। इन अवधारणाओं को समझकर और लागू करके, आप वेब एप्लिकेशन की अगली पीढ़ी का निर्माण कर सकते हैं जो वास्तव में दुनिया भर के उपयोगकर्ताओं को प्रसन्न करती है।

मुख्य बातें:

• रिएक्ट का कॉन्करेंट मोड इंटरप्टिबल रेंडरिंग की अनुमति देता है, जो सिंक्रोनस ब्लॉकिंग से मुक्त होता है।
• सस्पेंस, स्वचालित बैचिंग और ट्रांज़िशन जैसी सुविधाएँ इस समवर्ती नींव पर बनी हैं।
• समवर्ती सुविधाओं को सक्षम करने के लिए createRoot का उपयोग करें।
• गैर-तत्काल अपडेट की पहचान करें और उन्हें startTransition के साथ चिह्नित करें।
• समवर्ती रेंडरिंग वैश्विक उपयोगकर्ताओं के लिए UX में काफी सुधार करता है, खासकर विभिन्न नेटवर्क स्थितियों और उपकरणों पर।
• इष्टतम प्रदर्शन के लिए रिएक्ट की विकसित हो रही समवर्ती सुविधाओं के साथ अपडेट रहें।

आज ही अपनी परियोजनाओं में कॉन्करेंट मोड की खोज शुरू करें और सभी के लिए तेज़, अधिक प्रतिक्रियाशील और अधिक आनंददायक एप्लिकेशन बनाएँ।