Get AI summaries of any video or article — Sign up free
There's a new Tanstack package đź‘€ thumbnail

There's a new Tanstack package đź‘€

Theo - t3․gg·
6 min read

Based on Theo - t3․gg's video on YouTube. If you like this content, support the original creators by watching, liking and subscribing to their content.

TL;DR

React Query’s optimistic update story is criticized as brittle: invalidation refetches add latency, while manual optimistic writes can drift from server logic and types.

Briefing

TanStack DB lands as a bid to fix a long-running pain point in React Query: optimistic updates. The core claim is that “optimistic updates in TanStack Query kind of suck,” because the usual approach—invalidating queries and refetching—forces extra network round trips and leaves users staring at loading states. Even when developers try to do true optimistic UI, the mechanics get brittle: query keys are just strings/arrays, type safety doesn’t stay bound to the data shape being updated, and the client ends up recreating server logic to predict what the backend will do. As apps scale—adding filters, search, and multiple places where the same data is queried—those optimistic assumptions can drift, break, or require increasingly complex client-side glue.

Electric SQL enters as the practical backdrop for why this matters. Electric’s goal is a sync layer on top of Postgres that replicates only the relevant subset of data to each client, pushing changes out in real time. That requires serious infrastructure work: row-level security for authentication, a client integration layer, and an optimistic/latency-hiding strategy that works cleanly with React Query-style data fetching. Electric has its own server-side engine (including an Elixir backend and a “PGite” library that brings Postgres-like querying into the browser via WebAssembly), plus a TypeScript client that models database “shapes” and streams updates. But Electric SQL React hooks can get complicated when developers need optimistic behavior, because they often have to merge “pending mutation results” with “query results” inside render logic.

TanStack Optimistic—now renamed to TanStack DB—tries to provide a more coherent local state model for optimistic transactions. The pitch frames TanStack DB as a reactive, normalized transactional state engine that extends TanStack Query with “collections,” “live queries,” and “optimistic mutations.” Instead of invalidating and refetching, the library overlays local optimistic mutations on top of immutable synced data so UI updates can appear immediately, then be reconciled when the real sync data arrives. The API also leans heavily on Electric’s concepts: developers define collections tied to a query function, specify a primary key so updates can be granular, and provide a schema (e.g., Zod/Valibot/Arbitrary typing). Optimistic mutations run inside a transactional “mutator,” and live queries subscribe to changes affecting the shaped data.

Still, skepticism runs through the critique. The optimistic layer appears tightly coupled to Electric’s “shape” model, and the implementation details leak into application code—especially around how transactions and mutation logic are wired to collections. The reviewer argues that this makes the ergonomics less “TanStack-like” than React Query’s simple async-function model, and more specialized: backend endpoints and data shaping must match the library’s expectations. The result is a tradeoff—more reliable optimistic behavior in the Electric-centric world, but a potentially confusing or less portable developer experience for teams that don’t already structure their systems around shapes and collections. In short: TanStack DB may offer a better optimistic foundation, but it also signals a shift toward a more opinionated sync/data model than many React Query users are used to.

Cornell Notes

TanStack DB is presented as a response to React Query’s weak spot: optimistic updates. The usual React Query pattern—invalidating queries and refetching—adds extra network round trips, while “manual” optimistic updates can become fragile because query keys aren’t strongly tied to data shapes and types. Electric SQL provides the sync-layer context: it replicates Postgres data subsets to clients in real time, using row-level security and a “shape” abstraction to stream updates into the browser. TanStack DB aims to make optimistic UI more consistent by introducing collections, live queries, and optimistic mutations that overlay local transactional changes on top of synced data until the real updates arrive. The tradeoff is tighter coupling to Electric’s shape/collection model, which may reduce portability and increase implementation complexity outside that ecosystem.

Why does invalidating queries feel “not optimistic” in React Query-style workflows?

Invalidation triggers a refetch rather than updating the UI with the new result. For a mutation like adding a to-do, the client first sends the create request, then invalidates the to-do list query so it goes pending and refetches from the server. That means two network-dependent moments: the create call and then the list fetch. If keys don’t match perfectly across the app, the invalidation may even miss the intended cache entry, leaving stale UI until another refetch happens.

What breaks down when developers try to implement optimistic updates manually with React Query?

Optimistic updates require canceling in-flight queries, reading the current cached data, and writing an updated version back—often using query keys as the glue. The critique is that TanStack Query’s key-to-data binding is loose: keys are commonly string/array identifiers, and there’s no guaranteed link between a key and the data shape being updated. That makes it easy to introduce type drift (e.g., updating a cache entry with the wrong shape after an API response changes), and it gets worse when the same data is queried in multiple places or filtered differently.

How does Electric SQL’s architecture set up the need for a better optimistic layer?

Electric SQL syncs a subset of a Postgres database to each client. It must enforce authentication at the row level (often via row-level security) so clients only receive permitted rows. On the client side, it integrates real-time reactive bindings and needs a strategy for mutating data immediately while waiting for server confirmation. Electric’s “shape” abstraction and streaming updates help with reactivity, but optimistic UI can still become complex when developers have to merge mutation state with query state in React render logic.

What does TanStack DB add to address optimistic UI consistency?

TanStack DB introduces collections, live queries, and optimistic mutations. Developers define a collection with a query function and a primary key so updates can be granular (update one item rather than rerendering an entire list). Optimistic mutations run inside a transactional mutator; the library overlays local optimistic changes on top of immutable synced data. Live queries then read from this “local view” that overlays optimistic mutations until the real sync data arrives and reconciles the UI.

What is the main skepticism about TanStack DB’s design and ergonomics?

The critique is that TanStack DB is tightly shaped around Electric’s “shape” model and collections, so implementation details leak into application code. The API requires defining collections and wiring transactions in ways that may be confusing or less portable for teams not already structuring backends around shapes/endpoints. The reviewer contrasts this with React Query’s simpler mental model: provide an async function, get data, and move on—without needing to reshape the backend to match the client library’s expectations.

How does the “overlay” model work conceptually in TanStack DB?

Instead of mutating synced server data directly, TanStack DB treats synced data as immutable and stores optimistic changes separately. When live queries read, they see a merged view: synced data plus a local overlay of optimistic mutations. Once the server sync completes, the optimistic overlay is removed/reconciled, restoring the UI to match the server’s authoritative state.

Review Questions

  1. What specific shortcomings of React Query’s optimistic update patterns lead to extra network calls or type drift as applications scale?
  2. How do Electric SQL’s “shapes” and sync model influence the design of TanStack DB’s collections and live queries?
  3. In TanStack DB’s overlay approach, what stays immutable and what changes during an optimistic transaction?

Key Points

  1. 1

    React Query’s optimistic update story is criticized as brittle: invalidation refetches add latency, while manual optimistic writes can drift from server logic and types.

  2. 2

    Loose query-key binding makes it easy to update the wrong cache entry or write the wrong data shape, especially after API changes.

  3. 3

    Electric SQL syncs Postgres subsets to clients in real time, requiring row-level security and a client integration layer that can benefit from stronger optimistic semantics.

  4. 4

    TanStack DB proposes collections, live queries, and optimistic mutations that overlay local transactional changes on top of immutable synced data until server updates arrive.

  5. 5

    TanStack DB’s API is heavily coupled to Electric’s shape/collection concepts, which may reduce portability and increase backend-shaping requirements outside the Electric ecosystem.

  6. 6

    The optimistic mutation workflow relies on transactional mutators and granular primary keys to avoid rerendering entire lists when only one item changes.

Highlights

Invalidating a query after a mutation isn’t truly optimistic—it forces a second network round trip to refetch updated state.
Optimistic updates become dangerous when query keys and data shapes aren’t strongly linked, enabling type drift and incorrect cache writes.
Electric SQL’s sync layer depends on row-level security and a “shape” abstraction to stream relevant data to each client.
TanStack DB’s overlay model keeps synced server data immutable and renders optimistic changes as a temporary local overlay.
The biggest concern is ergonomics: TanStack DB may feel more specialized and backend-opinionated than React Query’s async-function simplicity.

Topics

  • TanStack DB
  • Optimistic Updates
  • Electric SQL
  • React Query
  • Postgres Sync

Mentioned