কেন React Query-এর মতো একটি server-state লাইব্রেরি ব্যবহার করবেন?

Question

Accepted Answer

**Server-state লাইব্রেরি** (React Query/TanStack Query, SWR, RTK Query) **সার্ভার থেকে ফেচ করা ডেটা** পরিচালনায় বিশেষজ্ঞ — এটিকে একটি ক্যাশ হিসেবে বিবেচনা করে যা রিমোট সোর্সের সাথে সিঙ্ক রাখে। এগুলি ক্যাশিং, লোডিং/এরর স্টেট, রিফেচিং এবং ডিডুপ্লিকেশন স্বয়ংক্রিয়ভাবে পরিচালনা করে, বিশাল পরিমাণ ম্যানুয়াল কোড প্রতিস্থাপন করে। ## সমস্যা: server data UI state-এর মতো নয় Server data *সার্ভারের মালিকানাধীন* এবং মাত্র ক্লায়েন্টে ক্যাশ করা, তাই এটি **stale** হতে পারে। হ্যান্ড-ম্যানেজ করার অর্থ প্রতিটি endpoint-এর জন্য ক্যাশিং, লোডিং/এরর ট্র্যাকিং, রিফেচিং, রিট্রাই এবং ডিডুপ্লিকেশন পুনরায় প্রয়োগ করা — ত্রুটিপ্রবণ এবং পুনরাবৃত্তিমূলক। ## React Query একটি hook-এ আপনাকে কী দেয় ```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 ; } ``` সেই একটি hook প্রদান করে: ```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 + cache invalidation ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` একটি mutation-এর পরে, আপনি প্রাসঙ্গিক query invalidate করেন এবং ক্যাশ রিফেচ করে — 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. ``` ## এটি কেন গুরুত্বপূর্ণ Server-state লাইব্রেরি একটি সমস্যার সমাধান করে যা জেনেরিক state টুলস (Redux, useState) দুর্বলভাবে পরিচালনা করে: ক্লায়েন্ট ক্যাশকে রিমোট ডেটার সাথে সিঙ্ক রাখা। তারা শত শত লাইন ম্যানুয়াল fetching/caching/loading লজিক ডিক্লেয়ারেটিভ hooks দিয়ে প্রতিস্থাপন করে, এবং পরিশীলিত আচরণ (dedup, background refetch, stale-while-revalidate) প্রদান করে যা হ্যান্ডে সঠিকভাবে তৈরি করা কঠিন। স্বীকৃতি দেওয়া যে server state তার নিজস্ব ডেডিকেটেড টুল প্রাপ্য — এবং একটি গ্রহণ করা প্রায়ই global state-কে নাটকীয়ভাবে সরলীকরণ করে — আধুনিক frontend আর্কিটেকচারের সবচেয়ে প্রভাবশালী অন্তর্দৃষ্টিগুলির মধ্যে একটি।