There's a new Tanstack package đź‘€
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.
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?
What breaks down when developers try to implement optimistic updates manually with React Query?
How does Electric SQL’s architecture set up the need for a better optimistic layer?
What does TanStack DB add to address optimistic UI consistency?
What is the main skepticism about TanStack DB’s design and ergonomics?
How does the “overlay” model work conceptually in TanStack DB?
Review Questions
- What specific shortcomings of React Query’s optimistic update patterns lead to extra network calls or type drift as applications scale?
- How do Electric SQL’s “shapes” and sync model influence the design of TanStack DB’s collections and live queries?
- In TanStack DB’s overlay approach, what stays immutable and what changes during an optimistic transaction?
Key Points
- 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
Loose query-key binding makes it easy to update the wrong cache entry or write the wrong data shape, especially after API changes.
- 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
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
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
The optimistic mutation workflow relies on transactional mutators and granular primary keys to avoid rerendering entire lists when only one item changes.