React Query सारख्या सर्व-स्टेट लायब्रेरी का वापरायची?

Question

Accepted Answer

**Server-state libraries** (React Query/TanStack Query, SWR, RTK Query) **सर्व्हरकडून मिळालेल्या डेटाच्या** व्यवस्थापनमध्ये विशेष आहेत — त्यांना रिमोट स्त्रोताशी सिंक ठेवण्याची कॅश म्हणून हाताळले जाते. ते कॅशिंग, लोडिंग/त्रुटी स्थिती, रीफेचिंग आणि डेडुप्लिकेशन स्वयंचलितपणे हाताळतात, मोठ्या प्रमाणात मॅन्युअल कोडची जागा घेतात. ## हे महत्वाचे का आहे सर्व्हर डेटा *सर्व्हरचा मालकीचा* आणि क्लायंटवर फक्त कॅश केलेला असतो, त्यामुळे तो **जुना** होऊ शकतो. त्याचे हाताळे मॅन्युअलपणे केल्याने प्रत्येक एंडपॉइंटसाठी कॅशिंग, लोडिंग/त्रुटी ट्रॅकिंग, रीफेचिंग, रिट्राई आणि डेडुप्लिकेशन पुन्हा लागू करणे — त्रुटीयुक्त आणि पुनरावृत्ती. ## 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 }); ``` म्यूटेशनानंतर, आप संबंधित क्वेरी अमान्य करा आणि कॅश रीफेच करा — UI ला सर्व्हरशी सिंक ठेवा. ## हे आपल्या "global state" गरजा कमी करते ```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) प्रदान करतात जे हाताळल्याने योग्यरित्या तयार करणे कठीण आहे. हे मान्य करणे की सर्व्हर स्टेट त्याचे स्वतःचे समर्पित टूल वाचवते — आणि एक अवलंबन करणे अक्सर विश्व स्थितीला नाटकीयरित्या सुलभ करते — सर्वात प्रभावशाली आधुनिक फ्रंटएंड आर्किटेक्चर अंतर्दृष्टी.