React Academy · पाठ

कैशिंग, पुराना समय और बैकग्राउंड रीफ़ेचिंग

सर्वर से डेटा दोबारा कब प्राप्त किया जाए, इसे नियंत्रित करने के लिए staleTime और gcTime कॉन्फ़िगर करें।

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

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

स्वागत है

इस पाठ में आप staleTime और gcTime कॉन्फ़िगर करेंगे, ताकि यह नियंत्रित कर सकें कि React Query डेटा को कितनी देर तक ताज़ा रखता है और कैश किए गए डेटा को मेमोरी में कितनी देर तक रखता है।

ताज़ा बनाम पुराना डेटा

React Query यह ट्रैक करता है कि कैश किया गया डेटा 'fresh' है या 'stale'। ताज़ा डेटा नेटवर्क अनुरोध के बिना तुरंत लौटा दिया जाता है। पुराने डेटा को भी तुरंत लौटाया जाता है, लेकिन उसे अपडेट करने के लिए बैकग्राउंड में दोबारा डेटा लाना शुरू हो जाता है।

staleTime

staleTime यह निर्धारित करता है कि डेटा कितनी देर (मिलीसेकंड में) तक ताज़ा रहता है। डिफ़ॉल्ट 0 है (अर्थात तुरंत पुराना)। इसे 60000 पर सेट करने का अर्थ है कि पिछले एक मिनट में लाया गया डेटा बैकग्राउंड में दोबारा डेटा लाए बिना लौटा दिया जाएगा।
useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  staleTime: 60_000, // fresh for 60 seconds
})

स्थिर डेटा के लिए staleTime सेट करना

जो डेटा बहुत कम बदलता है (जैसे, देशों की सूची या कॉन्फ़िगरेशन विकल्प), उसके लिए staleTime का मान अधिक रखें। लाइव डेटा (जैसे, शेयर की कीमतों) के लिए डिफ़ॉल्ट 0 रखें और पोलिंग सक्षम करें।
// Effectively never stale — reload only on explicit invalidation
useQuery({ queryKey: ['countries'], queryFn: fetchCountries,
  staleTime: Infinity })

gcTime (गार्बेज कलेक्शन)

gcTime (जिसे पहले cacheTime कहा जाता था) यह निर्धारित करता है कि UNUSED कैश किया गया डेटा गार्बेज कलेक्शन से पहले कितनी देर तक मेमोरी में रहता है। डिफ़ॉल्ट 5 मिनट है। gcTime बीत जाने के बाद भी, यदि कोई नया सब्सक्राइबर माउंट होता है, तो React Query तुरंत डेटा फिर से ला सकता है।
useQuery({
  queryKey: ['products'],
  queryFn: fetchProducts,
  gcTime: 10 * 60 * 1000, // keep in memory for 10 minutes
})

staleTime बनाम gcTime

staleTime यह नियंत्रित करता है कि दोबारा डेटा WHEN लाना है (डेटा की ताज़गी)। gcTime यह नियंत्रित करता है कि कैश किए गए डेटा को मेमोरी से WHEN हटाना है। staleTime <= gcTime सामान्य संबंध है।

बैकग्राउंड में दोबारा डेटा लाने के संकेतक

जब React Query बैकग्राउंड में दोबारा डेटा लाता है, तब `isFetching` true होता है, भले ही `isLoading` false हो (डेटा पहले से कैश में है)। हल्का स्पिनर दिखाने के लिए isFetching का उपयोग करें।
const { data, isLoading, isFetching } = useQuery({ /* ... */ });

return (
  <>
    {isLoading ? <Spinner /> : <DataView data={data} />}
    {isFetching && !isLoading && <RefreshIndicator />}
  </>
);

refetchOnWindowFocus

डिफ़ॉल्ट रूप से, उपयोगकर्ता टैब पर वापस आने पर React Query पुरानी क्वेरीज़ से डेटा फिर से लाता है। जो डेटा बहुत कम अपडेट होता है, उसके लिए इसे अक्षम करें।
useQuery({
  queryKey: ['settings'],
  queryFn: fetchSettings,
  refetchOnWindowFocus: false,
})

पोलिंग के लिए refetchInterval

टाइमर के आधार पर किसी क्वेरी से स्वचालित रूप से डेटा लाने के लिए `refetchInterval` सेट करें। यह लाइव डेटा डैशबोर्ड के लिए उपयोगी है।
useQuery({
  queryKey: ['liveStats'],
  queryFn: fetchStats,
  refetchInterval: 5000, // every 5 seconds
})

प्लेसहोल्डर डेटा

दोबारा डेटा लाए जाने के दौरान पिछला डेटा दिखाने के लिए `placeholderData` का उपयोग करें, जिससे लेआउट में अचानक बदलाव न हो। पेजिनेशन के लिए keepPreviousData विकल्प इसे आसान बनाता है।
import { keepPreviousData } from '@tanstack/react-query';

useQuery({
  queryKey: ['posts', page],
  queryFn: () => fetchPage(page),
  placeholderData: keepPreviousData,
})

त्वरित जाँच

किसी क्वेरी पर staleTime: Infinity सेट करने से क्या होता है?

पुनरावृत्ति

staleTime ताज़गी को नियंत्रित करता है — यानी बैकग्राउंड में दोबारा डेटा लाने से पहले की अवधि। gcTime मेमोरी को नियंत्रित करता है — यानी अनुपयोगी डेटा कितनी देर तक कैश में रहता है। isFetching बैकग्राउंड में दोबारा डेटा लाने का संकेत देता है। सहज पेजिनेशन के लिए placeholderData का उपयोग करें।

आगे

अगला पाठ: **useMutation के साथ म्यूटेशन** — आप एपीआई को डेटा भेजेंगे और सफलता पर क्वेरीज़ अमान्य करेंगे।
शुरुआत निःशुल्क

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

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

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

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

क्या “कैशिंग, पुराना समय और बैकग्राउंड रीफ़ेचिंग” पाठ निःशुल्क है?

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

“कैशिंग, पुराना समय और बैकग्राउंड रीफ़ेचिंग” में मैं क्या सीखूँगा?

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

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

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

“कैशिंग, पुराना समय और बैकग्राउंड रीफ़ेचिंग” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

  1. React Query और QueryClient सेट अप करना
  2. कैशिंग, पुराना समय और बैकग्राउंड रीफ़ेचिंग
  3. useMutation से म्यूटेशन
  4. useInfiniteQuery से अनंत स्क्रोल और पृष्ठांकन
← React Academy पर वापस जाएँ