Guía de Campo del Ecosistema TanStack

TanStack es una colección de bibliotecas headless, con seguridad de tipos y composables que gestionan la obtención de datos, el enrutamiento, tablas, formularios, virtualización y estado del cliente. El ecosistema surgió de React Query, renombrado posteriormente como TanStack Query. Sus bibliotecas de datos e interfaz de usuario incluyen adaptadores para React, Vue, Solid, Svelte y Angular, mientras que su router y framework full-stack están orientados a React y Solid. TanStack no es en sí mismo un framework; el proyecto describe sus componentes como utilidades headless y composables, y solo uno de sus miembros —TanStack Start— es un framework full-stack.

Si ya utilizas TanStack Query y ves que se mencionan Router, Start, Table, Form, Store, DB e AI, el problema práctico es determinar qué hace cada uno, cuál es su nivel de madurez y cuándo conviene adoptarlo en lugar del stack por defecto de React (Next.js, React Router, Redux/Zustand, React Hook Form, Apollo, AG Grid). Esta guía mapea el ecosistema biblioteca por biblioteca, ofrece una firma de código mínima para cada una, indica su madurez con un número de versión y muestra cómo se interconectan las piezas. Es un mapa, no un tutorial — los pasos de configuración se encuentran en la documentación oficial, enlazada a lo largo del texto.

Qué Es TanStack y Por Qué Importa el Concepto “Headless”

TanStack es un conjunto de bibliotecas independientes que comparten una regla de diseño: la biblioteca gestiona la lógica, y tú gestionas el renderizado. Cada biblioteca de TanStack separa el estado del marcado — la biblioteca ejecuta la máquina de estados; tu componente decide el aspecto de la interfaz. Esto es lo que significa “headless” en la práctica: no hay CSS de TanStack que sobrescribir, no hay componentes de TanStack que extender, y no hay una opinión del proveedor sobre cómo debe verse tu interfaz. TanStack Query es el origen de la marca — fue renombrado desde React Query cuando el ecosistema creció — aunque TanStack Table es anterior al cambio de nombre, por lo que Query es el origen popularizador, no literalmente la primera biblioteca.

La filosofía compartida se resume frecuentemente como “sé dueño de tu código, no de tu framework”. De ella se derivan tres propiedades:

• Headless: lógica sin interfaz de usuario. Conectas el estado de la biblioteca a cualquier marcado, sistema de diseño o capa de accesibilidad que ya utilices.
• Núcleo agnóstico al framework: las bibliotecas de datos e interfaz — Query, Table, Form, Virtual y Store — incluyen adaptadores oficiales para React, Vue, Solid, Svelte y Angular. El enrutamiento es la excepción: TanStack Router y TanStack Start están orientados únicamente a React y Solid.
• Composabilidad frente a monolitos: cada biblioteca funciona de forma independiente o en conjunto. Puedes adoptar Query sin adoptar Router, o Table sin adoptar Start.

El Mapa Biblioteca por Biblioteca

Cada biblioteca a continuación describe qué hace, a qué reemplaza, su madurez a junio de 2026 y una firma de código mínima. Las firmas representan la superficie de la API, no un tutorial de configuración — consulta la documentación enlazada para instalar y configurar.

TanStack Query — estado del servidor

TanStack Query gestiona el estado asíncrono del servidor: obtención de datos, caché, refetching en segundo plano, deduplicación y actualizaciones optimistas. Reemplaza el patrón manual de fetch más useEffect con el que comenzaron la mayoría de las aplicaciones React. Es estable.

// @tanstack/react-query v5.101.0
const { data: users, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: () => fetch('/api/users').then((res) => res.json()),
});

Query es el punto de entrada más adoptado del ecosistema y el cambio con mayor retorno de inversión en una base de código React existente, ya que elimina los estados de carga y error implementados manualmente sin tocar las capas de enrutamiento o interfaz de usuario.

TanStack Router — enrutamiento con seguridad de tipos

TanStack Router es un router del lado del cliente completamente tipado para React y Solid. Las rutas, los parámetros de URL, los parámetros de búsqueda, el contexto de ruta y los datos de los loaders están tipados de extremo a extremo, de modo que es el compilador — y no el usuario en tiempo de ejecución — quien detecta un enlace con una forma de parámetro incorrecta. Reemplaza a React Router para SPAs y es estable.

// @tanstack/react-router v1.170.16
const Route = createFileRoute('/products')({
  validateSearch: (search) => ({
    category: (search.category as string) ?? 'all',
    page: Number(search.page ?? 1),
  }),
});

const { category, page } = Route.useSearch();

Router trata los parámetros de búsqueda de la URL como estado tipado y validado, lo que hace que los filtros, el orden de clasificación y la paginación sean compartibles mediante URL y recuperables al recargar la página. Esto resuelve una clase específica y reproducible de errores: las repeticiones de sesión en dashboards SPA muestran con frecuencia que los usuarios pierden el estado de filtros, ordenación y paginación al recargar o navegar hacia atrás, cuando ese estado residía en la memoria del componente en lugar de en la URL — exactamente el modo de fallo que los parámetros de búsqueda tipados eliminan.

TanStack Table — grillas de datos headless

TanStack Table gestiona la lógica de las grillas de datos — definiciones de columnas, ordenación, filtrado, paginación, selección de filas, agrupación y visibilidad de columnas — dejando cada píxel de la interfaz en tus manos. Estableció el patrón headless en el ecosistema React y reemplaza a bibliotecas de grillas con opiniones propias como AG Grid y MUI DataGrid para equipos que desean control total del marcado. Es estable, con una línea V9 en desarrollo que aún no es la versión latest publicada.

// @tanstack/react-table v8.21.3
const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
});

La instancia de Table gestiona el estado; tu marcado renderiza lo que ese estado describe. Combinado con Query para paginación y filtrado del lado del servidor, maneja grandes conjuntos de datos sin necesidad de cargar todo en el cliente.

TanStack Form — formularios tipados

TanStack Form gestiona el estado de formularios y la validación — errores a nivel de campo y de formulario, validación síncrona y asíncrona, estado de envío — sin renderizar nada por sí mismo. Es el sucesor headless de React Hook Form, y es estable (v1).

// @tanstack/react-form v1.33.0
const form = useForm({
  defaultValues: { email: '', password: '' },
  onSubmit: async ({ value }) => { await loginUser(value); },
});

Los valores de los campos, los esquemas de validación y los payloads de envío están tipados de extremo a extremo, y la validación asíncrona (como verificar la disponibilidad de un nombre de usuario) es una funcionalidad de primera clase con debouncing y cancelación gestionados por la biblioteca.

TanStack Virtual — virtualización de listas y grillas

TanStack Virtual renderiza únicamente las filas o columnas visibles en el viewport para listas y grillas desplazables de gran tamaño, manteniendo el DOM reducido mientras el conjunto de datos permanece extenso. Proporciona las medidas y los desplazamientos; tú renderizas el marcado. Reemplaza el windowing implementado manualmente y bibliotecas como react-window y react-virtualized. Es estable.

// @tanstack/react-virtual v3.14.3
const virtualizer = useVirtualizer({
  count: items.length,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 48,
});

const rows = virtualizer.getVirtualItems();

useVirtualizer devuelve los elementos virtuales visibles más el tamaño total; tú posicionas cada elemento de forma absoluta según su desplazamiento. Se combina de forma natural con Table para grillas de datos de gran tamaño — Table gestiona el modelo de filas, Virtual mantiene en el DOM únicamente las filas visibles — de modo que una lista de cinco mil elementos se desplaza a plena velocidad.

TanStack Store — estado del cliente

TanStack Store es un store reactivo de grano fino que alimenta los mecanismos internos de varias otras bibliotecas de TanStack y se expone como un paquete independiente. Ofrece una alternativa a Zustand y Redux para el estado del cliente (no del servidor). Como paquete independiente se encuentra en alpha (v0.11.0), por lo que cualquier afirmación del tipo “reemplaza a Zustand/Redux” debe considerarse con esa madurez en mente.

// @tanstack/store v0.11.0 + @tanstack/react-store
import { Store } from '@tanstack/store';
import { useStore } from '@tanstack/react-store';

const countStore = new Store(0);
// en un componente:
const count = useStore(countStore);

La división de responsabilidades es el modelo mental más útil: Query gestiona el estado del servidor, Store gestiona el estado del cliente. Para la mayoría de las aplicaciones, Query junto con una pequeña cantidad de Store (o tu herramienta de estado del cliente existente) cubre toda la superficie de estado.

TanStack Start — framework full-stack

TanStack Start es un framework React full-stack construido sobre TanStack Router. Incorpora enrutamiento basado en archivos, funciones de servidor, SSR con streaming y TypeScript de extremo a extremo, manteniendo los mecanismos subyacentes visibles. Se posiciona frente a Next.js y Remix. Start se encuentra en la etapa de Release Candidate (línea de versiones actual 1.168.x), aún no declarado estable, y su soporte para React Server Components está disponible de forma experimental en lugar de como opción predeterminada en producción.

// @tanstack/react-start v1.168.26
import { createServerFn } from '@tanstack/react-start';

const getUser = createServerFn({ method: 'GET' })
  .validator((userId: string) => userId)
  .handler(async ({ data: userId }) => db.users.findById(userId));

Las funciones de servidor son funciones tipadas y co-ubicadas que se ejecutan en el servidor pero se invocan desde componentes del cliente como cualquier función asíncrona — los tipos fluyen desde la fuente de datos hasta el componente sin anotaciones manuales, y no es necesario mantener una capa de API separada para la obtención de datos simple. Nótese que la ruta de importación es @tanstack/react-start; las guías antiguas que muestran @tanstack/start están desactualizadas.

TanStack DB — store reactivo del cliente

TanStack DB es un store reactivo orientado al cliente con colecciones, consultas en vivo y mutaciones optimistas. Defines colecciones, escribes consultas sobre ellas, y cualquier componente que observe una consulta se vuelve a renderizar cuando los datos subyacentes cambian — ya sea por una sincronización con el servidor, una mutación local o una actualización optimista. Se sitúa frente a tu propio backend o API; es una capa de store/sincronización del lado del cliente, no un reemplazo de backends como servicio (BaaS) como Firebase o Supabase. Se encuentra en beta (v0.6.9).

DB aborda la brecha más allá del patrón fetch-and-cache: aplicaciones intensivas en datos con actualizaciones en tiempo real, filtrado complejo del lado del cliente y estado multiusuario. La comparación con “Firebase headless” es una analogía para el modelo de consultas reactivas, no una afirmación de sustitución de infraestructura alojada.

TanStack AI — primitivas de IA agnósticas al proveedor

TanStack AI proporciona primitivas headless para funcionalidades basadas en IA — gestión de respuestas en streaming, estado de conversación e interfaz unificada entre proveedores de modelos — sin vincularte a un único SDK o proveedor. Se encuentra en beta, tal como se anunció en el blog de TanStack, no en alpha ni en fase experimental.

Las respuestas en streaming (tokens que llegan de forma incremental) se gestionan de forma nativa, lo que hace que las interfaces de chat y generación con IA se sientan responsivas. El valor es arquitectónico: una capa agnóstica al proveedor te permite cambiar de proveedor de modelos sin reescribir el estado de tu interfaz de usuario.

La Tabla de Madurez

La madurez varía significativamente a lo largo del ecosistema, y el error más común en los resúmenes del ecosistema es presentar bibliotecas experimentales como consolidadas. Cinco de las nueve bibliotecas cubiertas aquí — Query, Router, Table, Form y Virtual — son estables a junio de 2026; Start se encuentra en la etapa de Release Candidate con React Server Components disponible de forma experimental; DB e AI están en beta; y Store está en alpha. La tabla a continuación registra la versión publicada y el estado de cada biblioteca.

Consulta la documentación enlazada para conocer el estado de lanzamiento actual.

Cómo Encajan las Piezas

Las bibliotecas están diseñadas para componerse, y la integración central es que los loaders de Router pre-obtienen datos de Query para que un componente se renderice contra una caché caliente. Un loader de ruta puede llamar a queryClient.ensureQueryData antes de que el componente se monte; en el momento en que se renderiza, los datos ya están en caché. Cuando Start añade SSR a ese pipeline, los datos se precargan en el servidor y se deshidratan, llegando como HTML completamente renderizado en la primera solicitud.

// @tanstack/react-router v1.170.16 + @tanstack/react-query v5.101.0
const Route = createFileRoute('/users/$userId')({
  loader: ({ params }) =>
    queryClient.ensureQueryData({
      queryKey: ['user', params.userId],
      queryFn: () => fetchUser(params.userId),
    }),
  component: UserPage,
});

Vale la pena destacar tres conexiones concretas:

1. Router → Query: los loaders de ruta pre-obtienen datos de Query, eliminando el destello de carga en el primer renderizado.
2. Start → Router: Start está construido sobre Router, por lo que el modelo de enrutamiento tipado y loaders se traslada directamente al framework full-stack, añadiendo SSR y deshidratación.
3. Table → Query: Table consume datos paginados y filtrados de Query para la paginación del lado del servidor, de modo que la grilla maneja grandes conjuntos de datos sin traer todo al cliente.

Elegir TanStack Frente a las Alternativas Establecidas

Elige TanStack Start para páginas públicas que necesiten ser indexadas y compartidas, y TanStack Router por sí solo para dashboards autenticados donde el SEO es irrelevante y el rendimiento del lado del cliente es la prioridad. Esta decisión sobre la estrategia de renderizado es la primera elección arquitectónica, y precede a cualquier decisión sobre bibliotecas — es una decisión de producto, no una preferencia técnica.

• Sitios públicos (páginas de marketing, blogs, productos de contenido) necesitan SSR. Los crawlers no ejecutan JavaScript de forma fiable; las Core Web Vitals como LCP, CLS e INP son señales de posicionamiento de Google; y los metadatos de Open Graph se leen desde la respuesta del servidor. Start entrega HTML completamente renderizado en la primera solicitud.
• Aplicaciones autenticadas (dashboards, herramientas internas, portales de clientes) no pueden ser rastreadas de todas formas, son de naturaleza stateful y basadas en sesión, y priorizan el tiempo hasta la interactividad. Una SPA sobre Router solo — sin la maquinaria SSR de Start — suele ser más liviana.

Para la pregunta de biblioteca frente a alternativa establecida, el ecosistema se mapea limpiamente sobre los valores por defecto de React:

Cuándo No Usar TanStack

El modelo headless y con seguridad de tipos de TanStack es una opción sólida por defecto, pero representa una desventaja real en tres situaciones, y un mapa honesto debe nombrarlas. El modelo no es la elección adecuada cuando tu equipo necesita componentes con estilos predefinidos desde el primer momento, cuando tu grupo de candidatos conoce Redux y React Router pero no TanStack, o cuando necesitas React Server Components estables en producción hoy — porque el soporte de RSC en Start sigue siendo experimental, y Next.js junto con React Hook Form siguen siendo las opciones más pragmáticas en esos casos.

En concreto:

• Necesidad de componentes con estilos predefinidos: headless significa que tú construyes la interfaz. Si quieres una grilla o un formulario con un aspecto terminado al instalarlo, AG Grid, MUI o un kit de componentes serán más rápidos.
• Familiaridad del equipo y contratación: más desarrolladores conocen Redux, React Router y Next.js. La curva de aprendizaje y el grupo de candidatos más reducido son costes reales para el escalado del equipo.
• RSC en producción hoy: Next.js cuenta con años de pruebas en producción para React Server Components; el soporte de RSC en Start es experimental a junio de 2026.
• Bibliotecas en etapas tempranas: Store (alpha), DB (beta) e AI (beta) aún no son opciones predeterminadas para producción. Adóptalas teniendo en cuenta esa madurez, y consulta la versión y el estado en la documentación oficial enlazada.

Más allá de las bibliotecas cubiertas aquí, TanStack mantiene un nivel de utilidades — incluyendo Virtual, Pacer, Ranger y las DevTools — que sigue el mismo patrón headless y con seguridad de tipos a menor escala.

Por Dónde Empezar

Adopta Query primero si aún no lo has hecho — es el cambio con mayor retorno de inversión en una base de código React y no te compromete con nada más. Considera Router para una SPA nueva en lugar de migrar una aplicación existente, y trata Start como la elección para nuevos sitios públicos que necesiten SSR mientras vigilas su estado de RC. Para las bibliotecas en etapas tempranas — Store, DB e AI — deja que la tabla de madurez con fecha y la documentación oficial enlazada, y no el entusiasmo del ecosistema, decidan si una biblioteca está lista para el rol que tienes en mente.

Preguntas Frecuentes

¿Cuál es la diferencia entre TanStack Query y TanStack DB?

TanStack Query gestiona el estado asíncrono del servidor mediante la obtención de datos, caché, refetching en segundo plano y deduplicación, tratando al servidor como la fuente de verdad que el cliente refleja. TanStack DB es un store reactivo orientado al cliente con colecciones, consultas en vivo y mutaciones optimistas que se sitúa frente a tu propio backend para aplicaciones intensivas en datos con actualizaciones en tiempo real y filtrado complejo del lado del cliente. Query es estable; DB está en beta a junio de 2026.

¿Puedo usar las bibliotecas de TanStack con Vue, Svelte o Angular en lugar de React?

Sí, para las bibliotecas de datos e interfaz de usuario. Query, Table, Form, Virtual y Store incluyen adaptadores oficiales para React, Vue, Solid, Svelte y Angular. El enrutamiento es la excepción: TanStack Router y el framework full-stack TanStack Start están orientados únicamente a React y Solid. Por tanto, un equipo de Vue o Angular puede adoptar Query y Table, pero no puede usar TanStack Router para el enrutamiento con seguridad de tipos.

¿Está TanStack Start listo para producción como reemplazo de Next.js?

No completamente, a junio de 2026. TanStack Start se encuentra en la etapa de Release Candidate en la línea de versiones 1.168.x, aún no declarado estable, y su soporte para React Server Components está disponible solo de forma experimental en lugar de como opción predeterminada en producción. Si necesitas RSC estable en producción hoy, Next.js cuenta con años de pruebas en producción para esa funcionalidad. Start es una elección razonable para nuevos sitios públicos con SSR donde el RSC experimental es aceptable.

¿Tengo que adoptar todo el ecosistema TanStack para usar una sola biblioteca?

No. Cada biblioteca de TanStack es independiente y composable, por lo que puedes adoptar Query sin Router, o Table sin Start. Las bibliotecas se integran cuando se usan juntas (los loaders de ruta pueden pre-obtener datos de Query, por ejemplo), pero ninguna requiere de las demás. Query es el punto de entrada más común porque es el cambio con mayor retorno de inversión en una base de código React existente y no te compromete con nada más del ecosistema.