O TanStack Query está em algum lugar do seu projeto React. Provavelmente tem um useQuery chamando uma API, um useMutation enviando dados, e um QueryClient configurado no root. Funciona bem — é por isso que a biblioteca tem dezenas de milhões de downloads mensais.

O que você pode não saber é que o TanStack hoje é muito mais que isso.

Em algum momento entre 2024 e 2025, enquanto a maioria dos devs estava focada no debate Next.js vs Remix, Tanner Linsley e o time do TanStack construíram em silêncio um stack completo: um router type-safe, um framework full-stack, uma biblioteca de formulários, uma camada de estado baseada em signals e até um banco de dados client-side. Tudo com a mesma filosofia: TypeScript-first, headless, sem opinião sobre UI.

O que o TanStack é hoje (e o que a maioria ainda pensa que é)

Se você perguntar para um dev React o que é o TanStack, a resposta provável é "aquela biblioteca de fetching de dados, o Query". Correto em 2022. Em 2026, incompleto.

O ecossistema atual tem sete projetos ativos:

  • TanStack Query — data fetching, caching e sincronização com o estado do servidor
  • TanStack Router — roteamento client-side com type-safety total
  • TanStack Table — tabelas e data grids headless
  • TanStack Form — gerenciamento de formulários baseado em signals
  • TanStack Store — estado reativo com signals (a base que une Form e DB)
  • TanStack Start — framework full-stack construído sobre Router e Vite
  • TanStack DB — banco de dados client-side com differential dataflow

Cada projeto pode ser usado de forma independente. Combinados, formam uma alternativa coesa ao stack Next.js + React Hook Form + Zustand que muitos times montam por padrão.

TanStack Query v5 e Router: a dupla que começou tudo

O TanStack Query v5, lançado em 2023, consolidou a filosofia central: separar estado do servidor de estado do cliente. useQuery não é gerenciamento de estado — é cache de dados remotos com sincronização automática. Essa distinção agora é o fundamento de todo o ecossistema.

O TanStack Router entrou na disputa com um argumento simples: o React Router v6 não tinha type-safety nativa — e o v7, embora tenha introduzido geração de tipos via typegen para params e loader data, ainda deixa search params sem tipagem por padrão. O TanStack Router resolve os três de forma nativa, sem passo de geração de código.

A proposta: cada rota tem um tipo explícito. Parâmetros de rota, search params, contexto — tudo inferido. Sem useParams<{ id: string }>() com cast manual. O Router sabe o que cada rota aceita e o TypeScript reclama se você tentar passar o tipo errado.

import { createFileRoute } from "@tanstack/react-router"

export const Route = createFileRoute("/users/$userId")({
  loader: ({ params }) => fetchUser(params.userId),
  component: UserPage,
})

function UserPage() {
  const { userId } = Route.useParams()
  const user = Route.useLoaderData()
  return <h1>{user.name}</h1>
}

O userId acima não é string | undefined — é string. O Router sabe que essa rota sempre tem esse parâmetro, e o TypeScript sabe disso também.

Search params são tratados como cidadãos de primeira classe. Em vez de parsear window.location.search manualmente, você define um schema com validação:

import { createFileRoute } from "@tanstack/react-router"
import { z } from "zod"

const searchSchema = z.object({
  page: z.number().default(1),
  sort: z.enum(["name", "date"]).default("date"),
})

export const Route = createFileRoute("/posts")({
  validateSearch: (search) => searchSchema.parse(search),
  component: PostsPage,
})

TanStack Start: um framework full-stack nascido do Router

O TanStack Start chegou ao v1 Release Candidate em setembro de 2025. É um framework full-stack construído sobre o Router e o Vite — e a diferença filosófica com o Next.js é deliberada.

O Next.js adota server-first: componentes são server components por padrão, e você opta por 'use client' quando precisa de interatividade no cliente. O Start adota client-first: a aplicação é uma SPA por padrão, com features de servidor opt-in. As rotas carregam dados no cliente, com SSR disponível quando necessário.

O mecanismo central são as server functions — funções que rodam no servidor mas podem ser chamadas do cliente como funções normais:

import { createServerFn } from "@tanstack/start"
import { db } from "~/db"

const getPosts = createServerFn({ method: "GET" }).handler(async () => {
  return db.query.posts.findMany()
})

// No loader:
const posts = await getPosts()

Não tem fetch("/api/posts"). Não tem rotas de API manuais. O retorno de getPosts() é tipado automaticamente a partir da implementação server-side.

Uma observação direta: o TanStack Start ainda é novo. O Next.js tem anos de produção, comunidade grande e suporte nativo na Vercel. Para projetos com SEO pesado ou times que já conhecem o Next.js bem, a troca não está justificada hoje. O Start faz mais sentido para quem já usa o Router e quer server functions sem montar um BFF separado.

TanStack Form e Store: formulários com signals sob o capô

O TanStack Form v1 foi lançado em maio de 2025. O diferencial técnico é o uso de signals via TanStack Store — o que muda como o estado de formulário se propaga.

React Hook Form e Formik re-renderizam componentes inteiros quando um campo muda. O TanStack Form usa signals para atualizar apenas o que mudou: o campo específico, sua validação, seu erro. Em formulários grandes com validação em cascata, isso tem impacto real.

import { useForm } from "@tanstack/react-form"
import { z } from "zod"

const form = useForm({
  defaultValues: { name: "", email: "" },
  validators: {
    onChange: z.object({
      name: z.string().min(2),
      email: z.string().email(),
    }),
  },
  onSubmit: async ({ value }) => {
    await createUser(value)
  },
})

return (
  <form onSubmit={form.handleSubmit}>
    <form.Field name="name">
      {(field) => (
        <input
          value={field.state.value}
          onChange={(e) => field.handleChange(e.target.value)}
        />
      )}
    </form.Field>
  </form>
)

O Form é framework-agnostic: tem adaptadores para Vue, Angular, Solid e Lit além do React. O TanStack Store pode ser usado separadamente como alternativa leve ao Zustand para estado global simples.

TanStack DB: differential dataflow no navegador

O TanStack DB é o projeto mais experimental do ecossistema. Na versão 0.6, ainda pré-1.0, mas com desenvolvimento ativo.

A proposta é diferente do que você provavelmente usa hoje: um banco de dados client-side que se integra ao TanStack Query e usa differential dataflow para atualizar resultados reativamente. Em vez de re-executar queries inteiras quando um registro muda, o DB calcula apenas o delta, sem re-executar a query completa.

import { createCollection, eq } from "@tanstack/db"
import { useLiveQuery } from "@tanstack/react-db"

const postsCollection = createCollection({ id: "posts", getKey: (p) => p.id })

// Em um componente React:
function PublishedPosts() {
  const { data } = useLiveQuery((q) =>
    q.from({ posts: postsCollection }).where(({ posts }) => eq(posts.status, "published"))
  )
  return <ul>{data?.map((p) => <li key={p.id}>{p.title}</li>)}</ul>
}

Quando um post muda de status, apenas o resultado afetado é recalculado; a query não roda do zero. A versão 0.6 adicionou persistência via SQLite, então os dados sobrevivem ao reload da página.

O caso de uso mais claro é apps com dados em tempo real: dashboards ao vivo, feeds, sistemas colaborativos. Ainda não está pronto para produção na maioria dos contextos, mas o problema que resolve é real.

Quando um stack TanStack-first faz sentido

A combinação Query + Router + Start faz mais sentido quando:

  • Você quer type-safety total de rota a query a componente, sem casts manuais
  • O app é client-heavy — muita interatividade, pouco SEO pesado
  • O time já usa o Query e quer manter consistência no stack
  • Você precisa de server functions sem operar um backend separado

O Next.js continua sendo a escolha mais segura quando SEO e Server Components são requisitos desde o início, ou quando o time já tem produção estável com ele.

Para formulários, a escolha entre TanStack Form e React Hook Form depende de escala. Em formulários de 5 a 10 campos simples, a diferença não é perceptível. Em formulários complexos com validação condicional e campos interdependentes, os signals do TanStack Form têm vantagem mensurável.

O TanStack DB vale a pena acompanhar. Não é substituto para um banco server-side — é uma camada client-side complementar para cenários com estado persistente e dados em tempo real.

Conclusão

O TanStack não tentou substituir o React. Preencheu os gaps que o React deixou em aberto: roteamento com type-safety, cache de dados do servidor, formulários sem re-render desnecessário, estado reativo com signals.

O que mudou em 2026 é que esses projetos foram conectados. O Router alimenta o Start. O Store alimenta o Form. O Query alimenta o DB. Você pode usar cada um separado — ou montar um stack coeso onde as partes conversam sem adaptadores.

Se o seu projeto usa o Query e você está avaliando routers, vale olhar o TanStack Router com atenção antes de escolher o React Router por hábito. A documentação melhorou muito no v1, e a type-safety que ele oferece é difícil de encontrar em alternativas.

Referências pesquisadas nesta publicação