import React, { experimental_useCache, Suspense } from 'react';

// एक API कॉल का अनुकरण करें (अपने वास्तविक API एंडपॉइंट से बदलें)
const fetchUserData = async (userId) => {
  console.log(`उपयोगकर्ता ID के लिए उपयोगकर्ता डेटा लाना: ${userId}`);
  await new Promise(resolve => setTimeout(resolve, 1000)); // नेटवर्क विलंबता का अनुकरण करें
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`उपयोगकर्ता डेटा लाने में विफल: ${response.status}`);
  }
  return response.json();
};

// fetchUserData फ़ंक्शन का एक कैश्ड संस्करण बनाएं
const getCachedUserData = experimental_useCache(fetchUserData);

function UserProfile({ userId }) {
  const userData = getCachedUserData(userId);

  return (
    

      
उपयोगकर्ता प्रोफ़ाइल
      
नाम: {userData.name}
      
ईमेल: {userData.email}
    
  );
}

function App() {
  return (
    उपयोगकर्ता डेटा लोड हो रहा है...

स्पष्टीकरण:

1. experimental_useCache आयात करें: हम React से आवश्यक हुक आयात करते हैं।
2. fetchUserData परिभाषित करें: यह फ़ंक्शन API से उपयोगकर्ता डेटा लाने का अनुकरण करता है। अपने वास्तविक डेटा फ़ेचिंग लॉजिक के साथ मॉक API कॉल को बदलें। await new Promise नेटवर्क विलंबता का अनुकरण करता है, जिससे कैशिंग का प्रभाव अधिक स्पष्ट होता है। उत्पादन-तत्परता के लिए त्रुटि प्रबंधन शामिल है।
3. getCachedUserData बनाएं: हम experimental_useCache का उपयोग fetchUserData फ़ंक्शन का एक कैश्ड संस्करण बनाने के लिए करते हैं। यह वह फ़ंक्शन है जिसका हम वास्तव में अपने कंपोनेंट में उपयोग करेंगे।
4. UserProfile में getCachedUserData का उपयोग करें: UserProfile कंपोनेंट उपयोगकर्ता डेटा प्राप्त करने के लिए getCachedUserData को कॉल करता है। क्योंकि हम experimental_useCache का उपयोग कर रहे हैं, डेटा कैश से प्राप्त किया जाएगा यदि यह पहले से ही उपलब्ध है।
5. Suspense के साथ लपेटें: UserProfile कंपोनेंट को Suspense के साथ लपेटा गया है ताकि डेटा प्राप्त होने के दौरान लोडिंग स्थिति को संभाला जा सके। यह एक सहज यूजर अनुभव सुनिश्चित करता है, भले ही डेटा को लोड होने में कुछ समय लगे।
6. एकाधिक कॉल: App कंपोनेंट समान userId (1) के साथ दो UserProfile कंपोनेंट्स को रेंडर करता है। दूसरा UserProfile कंपोनेंट कैश्ड डेटा का उपयोग करेगा, दूसरे API कॉल से बचेगा। इसमें एक अलग आईडी वाले दूसरे उपयोगकर्ता प्रोफ़ाइल भी शामिल है ताकि अनकैश्ड डेटा लाने का प्रदर्शन किया जा सके।

इस उदाहरण में, पहला UserProfile कंपोनेंट API से उपयोगकर्ता डेटा प्राप्त करेगा। हालाँकि, दूसरा UserProfile कंपोनेंट कैश्ड डेटा का उपयोग करेगा, दूसरे API कॉल से बचेगा। यह प्रदर्शन में काफी सुधार कर सकता है, खासकर यदि API कॉल महंगा है या यदि डेटा कई कंपोनेंट्स द्वारा एक्सेस किया जाता है।

सस्पेंस के साथ एकीकृत करना

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

ऊपर दिए गए उदाहरण में, Suspense कंपोनेंट UserProfile कंपोनेंट को लपेटता है और एक fallback प्रोप प्रदान करता है। यह फ़ॉलबैक UI प्रदर्शित किया जाएगा जबकि उपयोगकर्ता डेटा प्राप्त किया जा रहा है। डेटा उपलब्ध होने के बाद, UserProfile कंपोनेंट प्राप्त डेटा के साथ रेंडर किया जाएगा।

React सर्वर कंपोनेंट्स (RSCs) और experimental_useCache

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

एक ऐसे परिदृश्य पर विचार करें जहाँ आपके पास एक सर्वर कंपोनेंट है जिसे उपयोगकर्ता डेटा प्राप्त करने और UI के कई भागों में प्रदर्शित करने की आवश्यकता है। experimental_useCache के बिना, आप उपयोगकर्ता डेटा को कई बार प्राप्त कर सकते हैं, जो अक्षम हो सकता है। experimental_useCache के साथ, आप यह सुनिश्चित कर सकते हैं कि उपयोगकर्ता डेटा केवल एक बार प्राप्त किया जाए और फिर उसी सर्वर अनुरोध के भीतर बाद के उपयोग के लिए कैश किया जाए।

उदाहरण (वैचारिक RSC उदाहरण):

// सर्वर कंपोनेंट
import { experimental_useCache } from 'react';

async function fetchUserData(userId) {
  // डेटाबेस से उपयोगकर्ता डेटा लाने का अनुकरण करें
  await new Promise(resolve => setTimeout(resolve, 500)); // डेटाबेस क्वेरी विलंबता का अनुकरण करें
  return { id: userId, name: `उपयोगकर्ता ${userId}`, email: `user${userId}@example.com` };
}

const getCachedUserData = experimental_useCache(fetchUserData);

export default async function UserDashboard({ userId }) {
  const userData = await getCachedUserData(userId);

  return (
    

      
स्वागत है, {userData.name}!
      
      
    
  );
}

async function UserInfo({ userId }) {
  const userData = await getCachedUserData(userId);
  return (
    

      
उपयोगकर्ता जानकारी
      
ईमेल: {userData.email}
    
  );
}

async function UserActivity({ userId }) {
  const userData = await getCachedUserData(userId);
  return (
    

      
हाल की गतिविधि
      
{userData.name} ने होमपेज देखा।
    
  );
}

इस सरलीकृत उदाहरण में, UserDashboard, UserInfo, और UserActivity सभी सर्वर कंपोनेंट्स हैं। उन सभी को उपयोगकर्ता डेटा तक पहुँचने की आवश्यकता है। experimental_useCache का उपयोग यह सुनिश्चित करता है कि fetchUserData फ़ंक्शन को प्रति सर्वर अनुरोध केवल एक बार कॉल किया जाता है, भले ही इसका उपयोग कई कंपोनेंट्स में किया जा रहा हो।

विचार और संभावित कमियाँ

जबकि experimental_useCache महत्वपूर्ण लाभ प्रदान करता है, इसकी सीमाओं और संभावित कमियों के बारे में पता होना महत्वपूर्ण है:

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

कैश अमान्यकरण रणनीतियाँ

चूंकि experimental_useCache अमान्यकरण को नहीं संभालता है, इसलिए यहां कुछ रणनीतियाँ दी गई हैं जिनका आप उपयोग कर सकते हैं:

• मैनुअल अमान्यकरण: डेटा म्यूटेशन को ट्रैक करने के लिए एक कस्टम हुक या कॉन्टेक्स्ट प्रदाता लागू करें। जब एक म्यूटेशन होता है, तो कैश्ड फ़ंक्शन को रीसेट करके कैश को अमान्य करें। इसमें एक संस्करण या टाइमस्टैम्प संग्रहीत करना शामिल है जो म्यूटेशन पर बदलता है और इसे `fetch` फ़ंक्शन के भीतर जांचता है।

       
       import React, { createContext, useContext, useState, experimental_useCache } from 'react';
  
       const DataVersionContext = createContext(null);
  
       export function DataVersionProvider({ children }) {
         const [version, setVersion] = useState(0);
         const invalidate = () => setVersion(v => v + 1);
  
         return (
           
             {children}
           
         );
       }
  
       async function fetchData(version) {
          console.log("Fetching data with version:", version)
          await new Promise(resolve => setTimeout(resolve, 500));
          return { data: `Version ${version} के लिए डेटा` };
       }
  
       const useCachedData = () => {
         const { version } = useContext(DataVersionContext);
         return experimental_useCache(() => fetchData(version))(); // कैश को आह्वान करें
       };
  
       export function useInvalidateData() {
         return useContext(DataVersionContext).invalidate;
       }
  
       export default useCachedData;
  
       // उदाहरण उपयोग:
       function ComponentUsingData() {
         const data = useCachedData();
         return 
  {data?.data}
  ;
       }
  
       function ComponentThatInvalidates() {
          const invalidate = useInvalidateData();
          return कैश को अमान्य करें
       }
  
       // अपने ऐप को DataVersionProvider के साथ लपेटें
       // 
       //   
       //   
       // 
       
       

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

experimental_useCache का उपयोग करने के लिए सर्वोत्तम अभ्यास

experimental_useCache का प्रभावी ढंग से उपयोग करने और संभावित नुकसान से बचने के लिए, इन सर्वोत्तम प्रथाओं का पालन करें:

• महंगे ऑपरेशन्स के लिए इसका उपयोग करें: केवल उन ऑपरेशन्स के लिए experimental_useCache का उपयोग करें जो वास्तव में महंगे हैं, जैसे डेटा फ़ेचिंग या जटिल गणना। सस्ते ऑपरेशन्स को कैश करने से वास्तव में कैश प्रबंधन के ओवरहेड के कारण प्रदर्शन कम हो सकता है।
• स्पष्ट कैश कुंजियाँ परिभाषित करें: सुनिश्चित करें कि कैश्ड फ़ंक्शन में पारित तर्क विशिष्ट रूप से कैश किए जा रहे डेटा की पहचान करते हैं। यह सुनिश्चित करने के लिए महत्वपूर्ण है कि कैश सही ढंग से काम करता है और डेटा अनजाने में पुन: उपयोग नहीं किया जाता है। ऑब्जेक्ट तर्कों के लिए, एक सुसंगत कुंजी बनाने के लिए उन्हें क्रमबद्ध और हैश करने पर विचार करें।
• कैश अमान्यकरण रणनीतियाँ लागू करें: जैसा कि पहले उल्लेख किया गया है, आपको अंतर्निहित डेटा बदलने पर कैश को अमान्य करने के लिए अपनी खुद की रणनीतियाँ लागू करने की आवश्यकता होगी। एक ऐसी रणनीति चुनें जो आपके एप्लिकेशन और डेटा के लिए उपयुक्त हो।
• कैश प्रदर्शन की निगरानी करें: यह सुनिश्चित करने के लिए कि यह अपेक्षा के अनुरूप काम कर रहा है, अपने कैश के प्रदर्शन की निगरानी करें। कैश हिट और मिसेस को ट्रैक करने और संभावित अड़चनों की पहचान करने के लिए लॉगिंग और डिबगिंग टूल का उपयोग करें।
• विकल्पों पर विचार करें: experimental_useCache का उपयोग करने से पहले, विचार करें कि क्या अन्य कैशिंग समाधान आपकी आवश्यकताओं के लिए अधिक उपयुक्त हो सकते हैं। उदाहरण के लिए, यदि आपको कैश अमान्यकरण और बेदखली जैसी अंतर्निहित सुविधाओं के साथ एक अधिक मजबूत कैशिंग समाधान की आवश्यकता है, तो आप एक समर्पित कैशिंग लाइब्रेरी का उपयोग करने पर विचार कर सकते हैं। `react-query`, `SWR`, या यहां तक कि `localStorage` का उपयोग करना भी कभी-कभी अधिक उपयुक्त हो सकता है।
• छोटा शुरू करें: अपने एप्लिकेशन में experimental_useCache को धीरे-धीरे पेश करें। कुछ प्रमुख डेटा फ़ेचिंग ऑपरेशन्स को कैश करके प्रारंभ करें और जैसे-जैसे आप अधिक अनुभव प्राप्त करते हैं, इसके उपयोग का विस्तार करें।
• अपनी कैशिंग रणनीति को प्रलेखित करें: अपनी कैशिंग रणनीति को स्पष्ट रूप से प्रलेखित करें, जिसमें यह शामिल है कि कौन सा डेटा कैश किया जा रहा है, कैश को कैसे अमान्य किया जा रहा है, और कोई भी संभावित सीमाएँ। इससे अन्य डेवलपर्स के लिए आपके कोड को समझना और बनाए रखना आसान हो जाएगा।
• अच्छी तरह से परीक्षण करें: यह सुनिश्चित करने के लिए अपनी कैशिंग कार्यान्वयन का अच्छी तरह से परीक्षण करें कि यह सही ढंग से काम कर रहा है और यह किसी भी अप्रत्याशित बग को पेश नहीं कर रहा है। यह सत्यापित करने के लिए यूनिट परीक्षण लिखें कि कैश को अपेक्षा के अनुरूप भरा और अमान्य किया जा रहा है।

experimental_useCache के विकल्प

जबकि experimental_useCache React के भीतर कैशिंग का प्रबंधन करने का एक सुविधाजनक तरीका प्रदान करता है, यह उपलब्ध एकमात्र विकल्प नहीं है। कई अन्य कैशिंग समाधानों का उपयोग React अनुप्रयोगों में किया जा सकता है, प्रत्येक के अपने फायदे और नुकसान हैं।

• useMemo: useMemo हुक का उपयोग महंगी गणनाओं के परिणामों को मेमोइज़ करने के लिए किया जा सकता है। जबकि यह रेंडर के दौरान वास्तविक कैशिंग प्रदान नहीं करता है, यह एक ही कंपोनेंट के भीतर प्रदर्शन को अनुकूलित करने के लिए उपयोगी हो सकता है। यह डेटा फ़ेचिंग या उन परिदृश्यों के लिए कम उपयुक्त है जहाँ डेटा को कंपोनेंट्स में साझा करने की आवश्यकता होती है।
• React.memo: React.memo एक उच्च-क्रम कंपोनेंट है जिसका उपयोग फ़ंक्शनल कंपोनेंट्स को मेमोइज़ करने के लिए किया जा सकता है। यह कंपोनेंट को फिर से रेंडर होने से रोकता है यदि इसके प्रोप्स नहीं बदले हैं। यह कुछ मामलों में प्रदर्शन में सुधार कर सकता है, लेकिन यह डेटा का कैशिंग प्रदान नहीं करता है।
• बाहरी कैशिंग लाइब्रेरी (react-query, SWR): react-query और SWR जैसी लाइब्रेरी React अनुप्रयोगों के लिए व्यापक डेटा फ़ेचिंग और कैशिंग समाधान प्रदान करती हैं। ये लाइब्रेरी स्वचालित कैश अमान्यकरण, बैकग्राउंड डेटा फ़ेचिंग और आशावादी अपडेट जैसी सुविधाएँ प्रदान करती हैं। यदि आपको उन्नत सुविधाओं के साथ एक अधिक मजबूत कैशिंग समाधान की आवश्यकता है तो वे एक अच्छा विकल्प हो सकते हैं।
• स्थानीय संग्रहण / सत्र संग्रहण: सरल उपयोग-मामलों या सत्रों में डेटा को बनाए रखने के लिए, `localStorage` या `sessionStorage` का उपयोग किया जा सकता है। हालाँकि, क्रमबद्धता, अमान्यकरण, और संग्रहण सीमाओं का मैन्युअल रूप से प्रबंधन करने की आवश्यकता होती है।
• कस्टम कैशिंग समाधान: आप React के कॉन्टेक्स्ट API या अन्य स्टेट मैनेजमेंट तकनीकों का उपयोग करके अपने स्वयं के कस्टम कैशिंग समाधान भी बना सकते हैं। यह आपको कैशिंग कार्यान्वयन पर पूर्ण नियंत्रण प्रदान करता है, लेकिन इसके लिए अधिक प्रयास और विशेषज्ञता की भी आवश्यकता होती है।

निष्कर्ष

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

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

React के प्रायोगिक APIs के नवीनतम अपडेट के बारे में सूचित रहें और आवश्यकतानुसार अपने कोड को अनुकूलित करने के लिए तैयार रहें। जैसे-जैसे React विकसित होता रहता है, experimental_useCache जैसी कैशिंग तकनीक उच्च-प्रदर्शन और स्केलेबल वेब एप्लिकेशन बनाने में तेजी से महत्वपूर्ण भूमिका निभाएगी।