Perché usare una libreria di server-state come React Query?

Question

Accepted Answer

**Server-state libraries** (React Query/TanStack Query, SWR, RTK Query) si specializzano nella gestione **dei dati recuperati da un server** — trattandoli come una cache da mantenere sincronizzata con la fonte remota. Gestiscono automaticamente caching, stati di caricamento/errore, refetch e deduplicazione, sostituendo una grande quantità di codice manuale. ## Perché è importante I dati del server sono *posseduti dal server* e semplicemente memorizzati in cache sul client, quindi possono diventare **stantii**. Gestirli manualmente significa reimplementare caching, tracciamento del caricamento/errore, refetch, retry e deduplicazione per ogni endpoint — soggetto a errori e ripetitivo. ## Cosa ti offre React Query in un singolo 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 ; } ``` Quell'unico hook fornisce: ```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 + invalidazione della cache ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` Dopo una mutation, invalidi la query pertinente e la cache esegue un refetch — mantenendo l'UI coerente con il server. ## Riduce le tue esigenze di "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. ``` Le server-state libraries risolvono un problema che i tool di stato generico (Redux, useState) gestiscono male: mantenere una cache client sincronizzata con i dati remoti. Sostituiscono centinaia di righe di logica manuale di fetching/caching/loading con hook dichiarativi e forniscono comportamenti sofisticati (dedup, background refetch, stale-while-revalidate) che sono difficili da implementare correttamente a mano. Riconoscere che lo state del server merita un tool dedicato — e che adottarne uno spesso semplifica drasticamente lo state globale — è una delle intuizioni di architettura frontend più impattanti dei tempi moderni.