¿Por qué usar una librería de estado del servidor como React Query?

Question

Accepted Answer

Las **librerías de estado del servidor** (React Query/TanStack Query, SWR, RTK Query) se especializan en gestionar **datos obtenidos de un servidor** — tratándolos como un caché para mantenerlos sincronizados con la fuente remota. Manejan automáticamente el almacenamiento en caché, los estados de carga/error, la recarga y la deduplicación, reemplazando una cantidad enorme de código manual. ## Por qué es importante El estado del servidor no es como el estado de la UI El estado del servidor es *propiedad del servidor* y simplemente se almacena en caché en el cliente, por lo que puede volverse **obsoleto**. Gestionarlo manualmente significa reimplementar el almacenamiento en caché, el seguimiento de carga/error, la recarga, los reintentos y la deduplicación para cada punto final — propenso a errores y repetitivo. ## Qué te proporciona React Query en un único 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 ; } ``` Este único hook proporciona: ```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 ``` ## Mutaciones + invalidación de caché ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` Después de una mutación, invalidas la consulta relevante y el caché se recarga — manteniendo la UI consistente con el servidor. ## Reduce tus necesidades de "estado global" ```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. ``` ## Por qué es importante Las librerías de estado del servidor resuelven un problema que las herramientas genéricas de estado (Redux, useState) manejan mal: mantener un caché del cliente sincronizado con datos remotos. Reemplazan cientos de líneas de lógica manual de obtención/almacenamiento en caché/carga con hooks declarativos, y proporcionan comportamiento sofisticado (dedup, recarga en segundo plano, stale-while-revalidate) que es difícil de construir correctamente a mano. Reconocer que el estado del servidor merece su propia herramienta dedicada — y que adoptar una a menudo simplifica dramáticamente el estado global — es una de las perspectivas más impactantes de la arquitectura frontend moderna.