Mengapa menggunakan perpustakaan server-state seperti React Query?

Question

Accepted Answer

**Perpustakaan server-state** (React Query/TanStack Query, SWR, RTK Query) berspesialisasi dalam mengelola **data yang diambil dari server** — memperlakukannya sebagai cache untuk tetap sinkron dengan sumber jarak jauh. Mereka menangani caching, status loading/error, refetching, dan deduplikasi secara otomatis, menggantikan sejumlah besar kode manual. ## Mengapa ini penting Data server tidak seperti UI state Data server *dimiliki oleh server* dan hanya di-cache di klien, sehingga dapat menjadi **usang**. Mengelolanya secara manual berarti mengimplementasikan ulang caching, pelacakan loading/error, refetching, retry, dan deduplikasi untuk setiap endpoint — rentan terhadap kesalahan dan berulang. ## Apa yang React Query berikan dalam satu 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 tunggal ini menyediakan: ```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 + invalidasi cache ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` Setelah mutation, Anda menginvalidasi query yang relevan dan cache melakukan refetch — menjaga UI tetap konsisten dengan server. ## Ini mengurangi kebutuhan "global state" Anda ```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. ``` ## Mengapa ini penting Perpustakaan server-state menyelesaikan masalah yang ditangani dengan buruk oleh alat state generik (Redux, useState): menjaga cache klien tetap sinkron dengan data jarak jauh. Mereka menggantikan ratusan baris logika fetching/caching/loading manual dengan hook deklaratif, dan menyediakan perilaku canggih (dedup, refetch latar belakang, stale-while-revalidate) yang sulit dibangun dengan benar secara manual. Menyadari bahwa server state layak mendapatkan alat khusus sendiri — dan bahwa mengadopsi salah satunya sering kali secara dramatis menyederhanakan global state — adalah salah satu wawasan arsitektur frontend modern yang paling berdampak.