SWR y React Query para el almacenamiento en caché de datos
Use SWR o TanStack Query para obtener, almacenar en caché, deduplicar y revalidar datos del servidor, sustituyendo los patrones manuales de obtención con useEffect.
SWR y React Query para el almacenamiento en caché de datos es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
El estado del servidor es diferente
Los datos de red no son simplemente un estado normal. Necesitan caché, deduplicación, actualización en segundo plano y seguimiento de carga, errores y reintentos. Los patrones manuales de obtención de datos con useEffect + useState vuelven a implementar estas funciones de forma deficiente.
SWR frente a TanStack Query
SWR (Vercel): pequeño, sencillo y basado únicamente en hooks. TanStack Query (antes React Query): más grande y con más funciones (mutaciones, consultas infinitas, precarga y herramientas de desarrollo). Ambos son excelentes.
SWR: uso básico
useSWR(key, fetcher) devuelve los datos, el error y el estado de carga. Los datos se almacenan en caché por clave y se deduplican entre componentes.
import useSWR from 'swr';
const fetcher = (url) => fetch(url).then(r => r.json());
function Profile() {
const { data, error, isLoading } = useSWR('/api/me', fetcher);
if (error) return <ErrorMessage error={error} />;
if (isLoading) return <Spinner />;
return <h1>{data.name}</h1>;
}SWR: comportamiento de revalidación
De forma predeterminada, SWR revalida cuando la pestaña recupera el foco y al restablecerse la conexión. Devuelve inmediatamente el valor almacenado en caché («stale») y lo actualiza en segundo plano («while-revalidate»).
SWR: mutación
mutate(key) revalida una consulta almacenada en caché. Pase nuevos datos como segundo argumento para actualizar de forma optimista.
import useSWR, { mutate } from 'swr';
async function updateProfile(updates) {
// Optimistic update — UI reflects change immediately
mutate('/api/me', { ...currentData, ...updates }, false);
await fetch('/api/me', { method: 'PUT', body: JSON.stringify(updates) });
// Revalidate to get the server's canonical state
mutate('/api/me');
}TanStack Query: configuración
Envuelva la aplicación en un QueryClientProvider con un QueryClient configurado.
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const client = new QueryClient({
defaultOptions: {
queries: { staleTime: 30000, retry: 2 }
}
});
function App() {
return (
<QueryClientProvider client={client}>
<Routes />
</QueryClientProvider>
);
}useQuery
useQuery({ queryKey, queryFn }) obtiene y almacena los datos en caché.
import { useQuery } from '@tanstack/react-query';
function UserList() {
const { data, isLoading, error } = useQuery({
queryKey: ['users'],
queryFn: () => fetch('/api/users').then(r => r.json()),
staleTime: 60_000 // fresh for 1 minute
});
if (isLoading) return <Spinner />;
if (error) return <ErrorMessage error={error} />;
return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}useMutation para escrituras
useMutation gestiona POST/PUT/DELETE con estados integrados de espera y error, además de un hook onSuccess para invalidar las cachés.
import { useMutation, useQueryClient } from '@tanstack/react-query';
function CreateUserForm() {
const qc = useQueryClient();
const m = useMutation({
mutationFn: (user) => fetch('/api/users', { method: 'POST', body: JSON.stringify(user) }),
onSuccess: () => qc.invalidateQueries({ queryKey: ['users'] })
});
return <button onClick={() => m.mutate({ name: 'Alice' })} disabled={m.isPending}>Create</button>;
}Invalidación de consultas
Después de una mutación, invalide las consultas relacionadas para activar una nueva obtención. queryClient.invalidateQueries({ queryKey: ['users'] }) las marca como obsoletas y vuelve a obtenerlas si están montadas.
Actualizaciones optimistas
TanStack Query ofrece compatibilidad específica con las actualizaciones optimistas mediante onMutate, onError y onSettled.
useMutation({
mutationFn: updateUser,
onMutate: async (newUser) => {
await qc.cancelQueries({ queryKey: ['user', newUser.id] });
const previous = qc.getQueryData(['user', newUser.id]);
qc.setQueryData(['user', newUser.id], newUser);
return { previous };
},
onError: (_, newUser, ctx) => {
qc.setQueryData(['user', newUser.id], ctx.previous); // rollback
},
onSettled: (_, __, newUser) => {
qc.invalidateQueries({ queryKey: ['user', newUser.id] });
}
});Consultas infinitas
useInfiniteQuery gestiona listas paginadas o con desplazamiento infinito: expone fetchNextPage y realiza el seguimiento de todas las páginas cargadas.
React Query Devtools
Añada @tanstack/react-query-devtools para obtener un panel flotante que muestra todas las consultas almacenadas en caché y su estado, y permite invalidarlas manualmente.
Comprobación rápida
¿Cuál es la principal ventaja de utilizar SWR o TanStack Query frente a useEffect + fetch de forma manual?
Resumen: SWR y React Query
El estado del servidor necesita caché, deduplicación y revalidación. SWR es pequeño y sencillo. TanStack Query ofrece más funciones (mutaciones, consultas infinitas y herramientas de desarrollo). Use useQuery para las lecturas y useMutation para las escrituras. Utilice invalidateQueries después de las mutaciones. Realice actualizaciones optimistas con onMutate/onError. Ambas soluciones vuelven obsoleto el uso manual de useEffect+fetch en aplicaciones de producción.
Preguntas frecuentes
¿La lección «SWR y React Query para el almacenamiento en caché de datos» es gratis?
Sí — el texto completo de «SWR y React Query para el almacenamiento en caché de datos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «SWR y React Query para el almacenamiento en caché de datos»?
Use SWR o TanStack Query para obtener, almacenar en caché, deduplicar y revalidar datos del servidor, sustituyendo los patrones manuales de obtención con useEffect. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «SWR y React Query para el almacenamiento en caché de datos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Fetch API: GET POST PUT DELETE
- Axios: interceptores y URL base
- Manejo de errores: códigos de estado HTTP
- SWR y React Query para el almacenamiento en caché de datos