मुझे एक तरीका मिला जो गिटरूम स्रोत कोड में यूज़कॉलबैक का उपयोग करके यूज़एसडब्ल्यूआर में फ़ेचर को कैश करता है।

उपरोक्त छवि प्लेटफ़ॉर्म-एनालिटिक्स/रेंडर.एनालिटिक्स.टीएसएक्स से है। आइए इस कोड स्निपेट को समझने का प्रयास करें।

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

संहिता को समझना

आइए चरण दर चरण कोड के बारे में जानें:

const load = useCallback(async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
}, \[integration, date\]);

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

इसके बाद, हम डेटा फ़ेचिंग को प्रबंधित करने के लिए यूज़एसडब्ल्यूआर का उपयोग करते हैं:

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

यहां, यूज़एसडब्ल्यूआर को एक कुंजी (/analytics-${integration?.id}-${date}) और हमारे मेमोइज़्ड लोड फ़ंक्शन के साथ कॉन्फ़िगर किया गया है। कॉन्फ़िगरेशन विकल्प डेटा के पुनर्वैधीकरण व्यवहार को नियंत्रित करते हैं।

कैसे यूज़कॉलबैक अनावश्यक पुनः प्राप्ति को रोकता है

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

प्रतिक्रिया में फ़ंक्शन संदर्भ

रिएक्ट में, जब भी कोई घटक पुन: प्रस्तुत होता है, तो उसके भीतर परिभाषित सभी फ़ंक्शन फिर से बनाए जाते हैं। इसका मतलब यह है कि कॉलबैक का उपयोग किए बिना, प्रत्येक रेंडर पर आपके लोड फ़ंक्शन का एक नया उदाहरण बनाया जाएगा।

SWR के उपयोग पर प्रभाव

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

यहां एक विस्तृत विवरण दिया गया है:

1. बिना उपयोग के बिना कॉलबैक:

const load = async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
};

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

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

साथ उपयोगकॉलबैक:

const load = useCallback(async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
}, \[integration, date\]);

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

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

क्या आप सीखना चाहते हैं कि शुरुआत से shadcn-ui/ui कैसे बनाएं? जांचें बिल्ड-फ्रॉम-स्क्रैच

मेरे बारे में:

वेबसाइट: https://ramunarasinga.com/

लिंक्डइन: https://www.linkedin.com/in/ramu-narasinga-189361128/

जीथब: https://github.com/Ramu-Narasinga

ईमेल: [email protected]

स्क्रैच से shadcn-ui/ui बनाएं

सन्दर्भ:

1. https://github.com/gitroomhq/gitroom/blob/c03b96215fa30b267a97d7eafc2281f482a3192f/apps/frontend/src/components/platform-analytics/render.analytics.tsx#L25
2. https://github.com/search?q=repo:gitroomhq/gitroom उपयोगSWR&type=code
3. https://swr.vercel.app/docs/getting-started
4. https://react.dev/reference/react/useCallback