React Query जैसी सर्वर-स्टेट लाइब्रेरी का उपयोग क्यों करें?

Question

Accepted Answer

**सर्वर-स्टेट लाइब्रेरीज़** (React Query/TanStack Query, SWR, RTK Query) **सर्वर से प्राप्त डेटा** का प्रबंधन करने में विशेषज्ञ हैं — इसे रिमोट स्रोत के साथ सिंक रखने के लिए कैश के रूप में मानते हुए। वे कैशिंग, लोडिंग/त्रुटि स्थिति, रीफेचिंग और डीडुप्लिकेशन को स्वचालित रूप से संभालते हैं, जो बड़ी मात्रा में मैनुअल कोड को बदलता है। ## यह महत्वपूर्ण क्यों है सर्वर डेटा UI स्थिति जैसा नहीं है सर्वर डेटा *सर्वर के स्वामित्व में है* और केवल क्लाइंट पर कैश किया जाता है, इसलिए यह **पुरानी** हो सकती है। इसे हाथ से प्रबंधित करने का मतलब है कि कैशिंग, लोडिंग/त्रुटि ट्रैकिंग, रीफेचिंग, पुनः प्रयास और डीडुप्लिकेशन को प्रत्येक एंडपॉइंट के लिए फिर से लागू करना — त्रुटि-प्रवण और दोहराव वाला। ## React Query आपको एक हुक में क्या देता है ```jsx import { useQuery } from "@tanstack/react-query"; function Users() { const { data, isLoading, error, refetch } = useQuery({ queryKey: ["users"], // cache key queryFn: () => fetch("/api/users").then(r => r.json()), staleTime: 60_000, // consider fresh for 1 min }); if (isLoading) return ; if (error) return ; return ; } ``` यह एकल हुक प्रदान करता है: ```text ✓ Caching — data cached by queryKey, shared across components ✓ Loading/error — isLoading/error states managed for you ✓ Deduplication — same query in 5 components = ONE network request ✓ Background refetch— refetch on window focus/reconnect to stay fresh ✓ Stale-while-revalidate — show cached data instantly, refetch in background ✓ Retries — auto-retry failed requests ✓ Pagination/infinite scroll, prefetching, cache invalidation ``` ## Mutations + कैश अमान्यता ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` मutation के बाद, आप प्रासंगिक क्वेरी को अमान्य करते हैं और कैश रीफेच करता है — UI को सर्वर के साथ सुसंगत रखते हुए। ## यह आपकी "ग्लोबल स्टेट" जरूरतों को कम करता है ```text Much of what people put in Redux is actually SERVER state. Moving it to React Query often shrinks global state to just true UI state (theme, modals, filters) — simplifying the whole app. ``` ## यह महत्वपूर्ण क्यों है सर्वर-स्टेट लाइब्रेरीज़ एक समस्या को हल करती हैं जिसे सामान्य स्टेट टूल्स (Redux, useState) खराब तरीके से संभालते हैं: क्लाइंट कैश को रिमोट डेटा के साथ सिंक रखना। वे सैकड़ों लाइनों के मैनुअल फेचिंग/कैशिंग/लोडिंग लॉजिक को घोषणात्मक हुक से बदलते हैं, और परिष्कृत व्यवहार (dedup, पृष्ठभूमि रीफेच, stale-while-revalidate) प्रदान करते हैं जो हाथ से सही तरीके से बनाना मुश्किल है। यह समझना कि सर्वर स्टेट को इसका अपना समर्पित उपकरण मिलना चाहिए — और एक को अपनाने से अक्सर ग्लोबल स्टेट में नाटकीय रूप से सरलता मिलती है — आधुनिक फ्रंटएंड आर्किटेक्चर अंतर्दृष्टि में से एक सबसे प्रभावशाली है।