Começando com TanStack DB para UIs Reativas

Construir UIs reativas não deveria exigir escolher entre performance e simplicidade. No entanto, cada atualização de estado em aplicações JavaScript modernas desencadeia re-renderizações em cascata, memoização complexa e atualizações otimistas repletas de boilerplate. O TanStack DB muda completamente essa equação.

Este artigo apresenta o TanStack DB—uma camada de banco de dados client-side que estende o TanStack Query com coleções, live queries e differential dataflow para atualizações em submilissegundos. Você aprenderá como ele simplifica o gerenciamento de estado em comparação com Redux ou cache manual, e como adotá-lo incrementalmente em seus projetos existentes.

Nota: O TanStack DB está atualmente em beta (final de 2025). Embora as APIs possam evoluir, está estável o suficiente para exploração e adoção incremental em funcionalidades não críticas.

O Que É TanStack DB?

TanStack DB é um store reativo client-side construído sobre o TanStack Query. Enquanto o TanStack Query se destaca em buscar e cachear estado do servidor, ele trata cada resultado de query como uma entrada de cache isolada. O TanStack DB adiciona a camada relacional que faltava—habilitando joins, filtros e atualizações reativas através de todo o seu grafo de dados.

A mágica está no differential dataflow, uma técnica que recomputa apenas as partes das queries que realmente mudaram. Isso significa que atualizar uma linha em uma collection de 100.000 itens leva apenas 0,7ms em um M1 Pro—rápido o suficiente para eliminar completamente o jank da UI.

Conceitos Fundamentais: Collections, Live Queries e Optimistic Mutations

Collections: A Fundação dos Seus Dados

Collections são conjuntos tipados de objetos que podem ser populados de qualquer fonte—APIs REST, GraphQL ou engines de sincronização como ElectricSQL. Elas encapsulam suas chamadas useQuery existentes:

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

Isso parece familiar porque é construído sobre os padrões do TanStack Query. A diferença? Collections normalizam seus dados e habilitam queries reativas através de relacionamentos.

Live Queries: Reatividade Sem o Boilerplate

Live queries atualizam automaticamente quando os dados subjacentes mudam—sem invalidação manual de cache, sem cadeias de useMemo:

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

Quando o status de qualquer todo muda, esta query atualiza em menos de 1ms. O motor de differential dataflow garante que apenas as linhas afetadas sejam recomputadas, não todo o dataset.

Optimistic Mutations: Atualizações Instantâneas da UI

O TanStack DB lida com atualizações otimistas automaticamente, com rollback integrado em caso de falha:

// Antes: Atualizações otimistas manuais com TanStack Query
const mutation = useMutation({
  mutationFn: createTodo,
  onMutate: async (newTodo) => {
    // Mais de 20 linhas de boilerplate...
  }
})

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

A mutation aparece instantaneamente na sua UI e reverte automaticamente se o servidor a rejeitar. Sem boilerplate, sem gerenciamento manual de estado.

Por Que Differential Dataflow Muda Tudo

O gerenciamento de estado tradicional força uma escolha: ou fazer muitas chamadas de API (rede lenta) ou filtrar grandes datasets no client-side (renderização lenta). Differential dataflow habilita uma terceira opção: carregar dados normalizados uma vez, então realizar joins incrementais ultrarrápidos no navegador.

Empresas como Linear e Figma alcançam suas UIs instantâneas através de sistemas de atualização diferencial construídos customizadamente. O TanStack DB democratiza essa abordagem, tornando reatividade em submilissegundos acessível a qualquer aplicação JavaScript.

Sincronização Local-First com ElectricSQL

Embora o TanStack DB funcione muito bem com REST e GraphQL, ele realmente brilha quando pareado com engines de sincronização. ElectricSQL, por exemplo, usa replicação lógica do Postgres para transmitir mudanças diretamente aos clientes:

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

Agora qualquer mudança no seu banco de dados Postgres atualiza instantaneamente todos os clientes conectados—sem plumbing de WebSocket, sem broadcasting manual. Esse padrão de sincronização local-first elimina completamente a latência de rede das interações do usuário.

Caminho de Adoção Incremental

O TanStack DB se sobrepõe à sua configuração existente do TanStack Query. Comece com uma collection, mantenha suas chamadas de API atuais e migre incrementalmente:

1. Encapsule uma query existente em uma collection
2. Substitua arrays filtrados por live queries
3. Simplifique mutations com atualizações otimistas automáticas
4. (Opcional) Adicione sincronização em tempo real com ElectricSQL

Cada passo melhora a performance e reduz a complexidade. Nenhuma reescrita completa necessária.

Conclusão

O TanStack DB traz differential dataflow para JavaScript, habilitando UIs reativas que atualizam em microssegundos ao invés de milissegundos. Ao estender o TanStack Query com collections e live queries, ele elimina as escolhas tradicionais entre eficiência de rede e performance de renderização.

Embora ainda em beta, o TanStack DB está pronto para exploração e adoção incremental. Comece com uma única collection em uma funcionalidade não crítica e experimente a diferença que atualizações em submilissegundos fazem na sensação da sua aplicação. Seus usuários—e seu código—agradecerão.

Perguntas Frequentes

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.