Primeros Pasos con TanStack DB para UIs Reactivas

Construir UIs reactivas no debería requerir elegir entre rendimiento y simplicidad. Sin embargo, cada actualización de estado en las aplicaciones JavaScript modernas desencadena re-renderizados en cascada, memoización compleja y actualizaciones optimistas cargadas de código repetitivo. TanStack DB cambia completamente esta ecuación.

Este artículo presenta TanStack DB—una capa de base de datos del lado del cliente que extiende TanStack Query con colecciones, consultas en vivo y flujo de datos diferencial para actualizaciones en submilisegundos. Aprenderás cómo simplifica la gestión de estado en comparación con Redux o el cacheo manual, y cómo adoptarlo incrementalmente en tus proyectos existentes.

Nota: TanStack DB está actualmente en beta (a finales de 2025). Aunque las APIs pueden evolucionar, es lo suficientemente estable para exploración y adopción incremental en funcionalidades no críticas.

¿Qué es TanStack DB?

TanStack DB es un almacén reactivo del cliente que se construye sobre TanStack Query. Mientras que TanStack Query sobresale en la obtención y cacheo del estado del servidor, trata cada resultado de consulta como una entrada de caché aislada. TanStack DB añade la capa relacional que faltaba—habilitando joins, filtros y actualizaciones reactivas a través de todo tu grafo de datos.

La magia reside en el flujo de datos diferencial (differential dataflow), una técnica que solo recomputa las partes de las consultas que realmente cambiaron. Esto significa que actualizar una fila en una colección de 100,000 elementos toma solo 0.7ms en un M1 Pro—lo suficientemente rápido para eliminar completamente el jank de la UI.

Conceptos Fundamentales: Colecciones, Consultas en Vivo y Mutaciones Optimistas

Colecciones: Tu Fundamento de Datos

Las colecciones son conjuntos tipados de objetos que pueden poblarse desde cualquier fuente—APIs REST, GraphQL o motores de sincronización como ElectricSQL. Envuelven tus llamadas useQuery existentes:

const todoCollection = createCollection(
  queryCollectionOptions({
    queryKey: ['todos'],
    queryFn: async () => api.todos.getAll(),
    getKey: (item) => item.id,
    schema: todoSchema
  })
)

Esto se ve familiar porque se construye sobre los patrones de TanStack Query. ¿La diferencia? Las colecciones normalizan tus datos y habilitan consultas reactivas a través de relaciones.

Consultas en Vivo: Reactividad Sin el Código Repetitivo

Las consultas en vivo se actualizan automáticamente cuando los datos subyacentes cambian—sin invalidación manual de caché, sin cadenas de useMemo:

const { data: activeTodos } = useLiveQuery((query) =>
  query
    .from({ todos: todoCollection })
    .where(({ todos }) => eq(todos.completed, false))
)

Cuando el estado de cualquier todo cambia, esta consulta se actualiza en menos de 1ms. El motor de flujo de datos diferencial asegura que solo las filas afectadas sean recomputadas, no todo el conjunto de datos.

Mutaciones Optimistas: Actualizaciones Instantáneas de UI

TanStack DB maneja las actualizaciones optimistas automáticamente, con reversión incorporada en caso de fallo:

// Antes: Actualizaciones optimistas manuales con TanStack Query
const mutation = useMutation({
  mutationFn: createTodo,
  onMutate: async (newTodo) => {
    // Más de 20 líneas de código repetitivo...
  }
})

// Después: TanStack DB
todoCollection.insert({
  id: uuid(),
  text: 'Ship faster',
  completed: false
})

La mutación aparece instantáneamente en tu UI y se revierte automáticamente si el servidor la rechaza. Sin código repetitivo, sin gestión manual de estado.

Por Qué el Flujo de Datos Diferencial lo Cambia Todo

La gestión de estado tradicional fuerza una disyuntiva: o hacer muchas llamadas a la API (red lenta) o filtrar grandes conjuntos de datos del lado del cliente (renderizado lento). El flujo de datos diferencial habilita una tercera opción: cargar datos normalizados una vez, luego realizar joins incrementales ultrarrápidos en el navegador.

Empresas como Linear y Figma logran sus UIs instantáneas a través de sistemas de actualización diferencial construidos a medida. TanStack DB democratiza este enfoque, haciendo la reactividad en submilisegundos accesible para cualquier aplicación JavaScript.

Sincronización Local-First con ElectricSQL

Aunque TanStack DB funciona muy bien con REST y GraphQL, realmente brilla cuando se combina con motores de sincronización. ElectricSQL, por ejemplo, utiliza la replicación lógica de Postgres para transmitir cambios directamente a los clientes:

const todoCollection = createCollection(
  electricCollectionOptions({
    shapeOptions: {
      url: 'http://localhost:3003/v1/shape',
      params: { table: 'todos' }
    },
    getKey: (item) => item.id
  })
)

Ahora cualquier cambio en tu base de datos Postgres actualiza instantáneamente todos los clientes conectados—sin plomería de WebSocket, sin difusión manual. Este patrón de sincronización local-first elimina completamente la latencia de red de las interacciones del usuario.

Ruta de Adopción Incremental

TanStack DB se superpone sobre tu configuración existente de TanStack Query. Comienza con una colección, mantén tus llamadas actuales a la API y migra incrementalmente:

1. Envuelve una consulta existente en una colección
2. Reemplaza arrays filtrados con consultas en vivo
3. Simplifica mutaciones con actualizaciones optimistas automáticas
4. (Opcional) Añade sincronización en tiempo real con ElectricSQL

Cada paso mejora el rendimiento y reduce la complejidad. No se requieren reescrituras de big-bang.

Conclusión

TanStack DB trae el flujo de datos diferencial a JavaScript, habilitando UIs reactivas que se actualizan en microsegundos en lugar de milisegundos. Al extender TanStack Query con colecciones y consultas en vivo, elimina las disyuntivas tradicionales entre eficiencia de red y rendimiento de renderizado.

Aunque todavía está en beta, TanStack DB está listo para exploración y adopción incremental. Comienza con una sola colección en una funcionalidad no crítica y experimenta la diferencia que las actualizaciones en submilisegundos hacen en la sensación de tu aplicación. Tus usuarios—y tu código base—te lo agradecerán.

Preguntas Frecuentes

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.