Erste Schritte mit TanStack DB für reaktive UIs

Der Aufbau reaktiver UIs sollte nicht erfordern, zwischen Performance und Einfachheit zu wählen. Dennoch löst jede Zustandsaktualisierung in modernen JavaScript-Anwendungen kaskadierende Re-Renders, komplexe Memoization und boilerplate-lastige optimistische Updates aus. TanStack DB ändert diese Gleichung grundlegend.

Dieser Artikel stellt TanStack DB vor – eine clientseitige Datenbankschicht, die TanStack Query um Collections, Live Queries und Differential Dataflow für Sub-Millisekunden-Updates erweitert. Sie erfahren, wie es das State Management im Vergleich zu Redux oder manuellem Caching vereinfacht und wie Sie es schrittweise in Ihren bestehenden Projekten einführen können.

Hinweis: TanStack DB befindet sich derzeit in der Beta-Phase (Stand Ende 2025). Während sich APIs noch weiterentwickeln können, ist es stabil genug für Exploration und schrittweise Einführung in nicht-kritischen Features.

Was ist TanStack DB?

TanStack DB ist ein reaktiver Client-Store, der auf TanStack Query aufbaut. Während TanStack Query hervorragend im Abrufen und Cachen von Server-State ist, behandelt es jedes Query-Ergebnis als isolierten Cache-Eintrag. TanStack DB fügt die fehlende relationale Schicht hinzu – und ermöglicht Joins, Filter und reaktive Updates über Ihren gesamten Datengraphen.

Die Magie liegt im Differential Dataflow, einer Technik, die nur die Teile von Queries neu berechnet, die sich tatsächlich geändert haben. Das bedeutet, dass die Aktualisierung einer Zeile in einer Collection mit 100.000 Einträgen auf einem M1 Pro nur 0,7 ms dauert – schnell genug, um UI-Ruckler vollständig zu eliminieren.

Kernkonzepte: Collections, Live Queries und Optimistic Mutations

Collections: Ihr Daten-Fundament

Collections sind typisierte Mengen von Objekten, die aus beliebigen Quellen befüllt werden können – REST-APIs, GraphQL oder Sync-Engines wie ElectricSQL. Sie kapseln Ihre bestehenden useQuery-Aufrufe:

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

Das sieht vertraut aus, weil es auf den Patterns von TanStack Query aufbaut. Der Unterschied? Collections normalisieren Ihre Daten und ermöglichen reaktive Queries über Beziehungen hinweg.

Live Queries: Reaktiv ohne Boilerplate

Live Queries aktualisieren sich automatisch, wenn sich zugrunde liegende Daten ändern – keine manuelle Cache-Invalidierung, keine useMemo-Ketten:

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

Wenn sich der Status eines Todos ändert, aktualisiert sich diese Query in unter 1 ms. Die Differential-Dataflow-Engine stellt sicher, dass nur betroffene Zeilen neu berechnet werden, nicht das gesamte Dataset.

Optimistic Mutations: Sofortige UI-Updates

TanStack DB handhabt optimistische Updates automatisch, mit eingebautem Rollback bei Fehlern:

// Vorher: Manuelle optimistische Updates mit TanStack Query
const mutation = useMutation({
  mutationFn: createTodo,
  onMutate: async (newTodo) => {
    // 20+ Zeilen Boilerplate...
  }
})

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

Die Mutation erscheint sofort in Ihrer UI und wird automatisch zurückgerollt, wenn der Server sie ablehnt. Kein Boilerplate, kein manuelles State Management.

Warum Differential Dataflow alles verändert

Traditionelles State Management erzwingt einen Trade-off: entweder viele API-Aufrufe machen (langsames Netzwerk) oder große Datasets clientseitig filtern (langsames Rendering). Differential Dataflow ermöglicht eine dritte Option: normalisierte Daten einmal laden, dann blitzschnelle inkrementelle Joins im Browser durchführen.

Unternehmen wie Linear und Figma erreichen ihre instant UIs durch selbst gebaute Differential-Update-Systeme. TanStack DB demokratisiert diesen Ansatz und macht Sub-Millisekunden-Reaktivität für jede JavaScript-Anwendung zugänglich.

Local-First Sync mit ElectricSQL

Während TanStack DB hervorragend mit REST und GraphQL funktioniert, glänzt es wirklich in Kombination mit Sync-Engines. ElectricSQL nutzt beispielsweise Postgres Logical Replication, um Änderungen direkt an Clients zu streamen:

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

Jetzt aktualisiert jede Änderung an Ihrer Postgres-Datenbank sofort alle verbundenen Clients – kein WebSocket-Plumbing, kein manuelles Broadcasting. Dieses Local-First-Sync-Pattern eliminiert Netzwerk-Latenz aus Benutzerinteraktionen vollständig.

Schrittweiser Einführungspfad

TanStack DB baut auf Ihrem bestehenden TanStack-Query-Setup auf. Beginnen Sie mit einer Collection, behalten Sie Ihre aktuellen API-Aufrufe bei und migrieren Sie schrittweise:

1. Kapseln Sie eine bestehende Query in einer Collection
2. Ersetzen Sie gefilterte Arrays durch Live Queries
3. Vereinfachen Sie Mutations mit automatischen optimistischen Updates
4. (Optional) Fügen Sie Echtzeit-Sync mit ElectricSQL hinzu

Jeder Schritt verbessert die Performance und reduziert die Komplexität. Keine Big-Bang-Rewrites erforderlich.

Fazit

TanStack DB bringt Differential Dataflow zu JavaScript und ermöglicht reaktive UIs, die sich in Mikrosekunden statt Millisekunden aktualisieren. Durch die Erweiterung von TanStack Query mit Collections und Live Queries eliminiert es die traditionellen Trade-offs zwischen Netzwerkeffizienz und Rendering-Performance.

Obwohl noch in der Beta-Phase, ist TanStack DB bereit für Exploration und schrittweise Einführung. Beginnen Sie mit einer einzelnen Collection in einem nicht-kritischen Feature und erleben Sie den Unterschied, den Sub-Millisekunden-Updates für das Gefühl Ihrer Anwendung machen. Ihre Benutzer – und Ihre Codebasis – werden es Ihnen danken.

FAQs

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.