If you're a developer, you've probably come across the word TanStack. But what exactly is it?
What is TanStack?
TanStack is a collection of open-source JavaScript libraries created and maintained by Tanner Linsley and a big open-source community.
What makes TanStack special is the shared philosophy behind all of them:
- Framework-agnostic: most TanStack libraries work with React, Vue, Solid, Svelte, and Angular
- Type-safe: built with TypeScript from the ground up, so you get excellent autocomplete and compile-time safety
- Headless: they handle logic and state, leaving the UI entirely up to you
- Configuration over Defaults: all of the libraries come with great defaults, while being fully customizable
- Zero opinion on styling: no CSS-in-JS, no class names to override, no design system to fight
Each TanStack library solve one problem extremely well, while delivering an outstanding developer experience.
What Are The Most Popular TanStack Libraries?
TanStack Query
Formerly known as React Query, TanStack Query is by far the most widely used library in the ecosystem.
It handles server state management, i.e. fetching, caching, synchronizing, and updating data from APIs.
Before TanStack Query, you would manually write useEffect + useState combinations to fetch data, handle loading/error states, and figure out when to refetch.
TanStack Query replaces all of that with a clean, declarative API:
const { data, isLoading, error } = useQuery({
queryKey: ['user', userId],
queryFn: () => fetch(`/api/users/${userId}`).then((r) => r.json()),
})
TanStack Router
TanStack Router is a fully type-safe router for React applications.
It allows you to handle having multiple pages in your React application.
Unlike most routers, it knows the exact shape of your route params and search params at compile time, so you't shoot yourself in the foot!
It supports file-based routing, nested layouts, data loaders, and search param validation out of the box.
TanStack Start
TanStack Start is a full-stack React framework built on top of TanStack Router.
It adds server-side rendering, server functions, API routes, and streaming, making it a direct competitor to frameworks like Next.js and Remix.
If you want to learn TanStack Start, our course is a great way to get started.
More TanStack Libraries
TanStack Table
TanStack Table is a headless table library that handles all the complex logic of building data tables: sorting, filtering, pagination, row selection, column resizing, and more. You bring your own UI and the library manages all the behavoral part.
It's the go-to choice for building dashboards, tables and data-heavy interfaces.
TanStack Form
TanStack Form handles form state management with a focus on performance and type safety.
It supports complex validation, field arrays, and async validation. It has adapters for popular runtime validation libraries like Zod and Valibot.
TanStack Virtual
TanStack Virtual lets you virtualize long lists and grids, to only render the items currently visible in the viewport.
This keeps your app fast even when displaying tens of thousands of rows.
When Should I Use TanStack Libraries
| Library | Use it when... |
|---|---|
| Query | You fetch data from an API and want caching, background refetching, and loading/error states handled for you |
| Router | You want type-safe routing in a React SPA (Client only) |
| Start | You want to build a fullstack app |
| Table | You need to display and interact with tabular data |
| Form | You have complex forms with validation and want to avoid re-render issues |
| Virtual | Your lists have more than a few hundred items |
You don't need to adopt the whole TanStack ecosystem at once. Most developers start with TanStack Query and add other libraries as the need arises.
How To Learn TanStack Libraries
The best way to learn TanStack is by building something real with it.
Here's a suggested path:
- Start with TanStack Query: It has the widest adoption and the most learning resources. The official docs are excellent.
- Add TanStack Router by building a client-side app with multiple pages.
- Switch To TanStack Start and explore its server-side functionality.
