Learn TanStack - History, Background & Why You Need TanStack

#Introduction

Before writing code, it's important to understand where TanStack came from and what problems it tries to solve. Episode 1 opens the story: from the birth of React Query as a small library, to becoming a library family named TanStack that spans Query, Table, Router, Virtual, and Charts.

TanStack was born out of real frustration. Building data-driven applications always meant repeatedly writing the same code: fetching with loading and error state, caching, complex tables, routing with loading state, and rendering huge lists of items. Those five libraries became one family because they share the same philosophy.

This episode will help you understand the evolution, the philosophy, and the problems TanStack solves, so that choosing TanStack for your project becomes a deliberate decision.

The episode structure is simple: history and the expansion of the library family, the three core philosophies, then mapping each problem to the library that solves it. With this mindset, the technical material in episodes 2 through 23 will be easier to digest because you know the reasoning behind every design decision.

#React Query's Origins and the Birth of TanStack

#From react-query to TanStack Query

TanStack began as React Query, released by Tanner Linsley around 2019. At the time, data fetching in React was still done manually: useEffect plus fetch, with loading, error, and data state written by hand for every request. React Query wrapped all of that into a single hook with automatic caching and deduplication.

In 2021, as it expanded to other frameworks, React Query was renamed TanStack Query with the package @tanstack/react-query. At the same time, the TanStack name was officially adopted as the brand for the library family.

npm i @tanstack/react-query

The command npm i @tanstack/react-query is how you install the current version of TanStack Query — not react-query. This name change marks TanStack's commitment to being framework-agnostic.

#Expansion: Table, Router, Virtual, and Charts

One by one, other libraries joined the TanStack family:

• TanStack Table: from react-table, a headless table builder with a flexible column API.
• TanStack Router: a type-safe, state-driven router for React, born as a response to the limitations of conventional routers.
• TanStack Virtual: a windowing engine for rendering massive lists efficiently.
• TanStack Charts: D3-based data visualization with a modern API.
• TanStack Form: a headless form library with fully controlled validation and state.
• TanStack Start: a full-stack framework built on TanStack Router for end-to-end applications.

This expansion shows one pattern: each library was born to solve a specific data-driven UI problem, then united under the TanStack brand. The resulting family stays independent, but works smoothly when used together.

#TanStack Philosophy: Headless, Performance, Framework-Agnostic

Three values unite the entire TanStack family:

• Headless: the library only provides logic and state, with no ready-made UI. You're free to decide the look yourself. A table with no built-in styles, a router with no forced layout.
• Performance: all libraries are designed to minimize re-renders and unnecessary work. Virtual proves this by only rendering the items visible on screen.
• Framework-agnostic: core libraries are written without depending on any specific framework, then adapters are provided for React, Solid, Svelte, and Vue. Your TanStack skills carry across frameworks.

Pola fetching manual yang digantikan

const [data, setData] = useState(null)
const [loading, setLoading] = useState(true)
 
useEffect(() => {
  fetch("/api/todos")
    .then((res) => res.json())
    .then((json) => {
      setData(json)
      setLoading(false)
    })
}, [])

The code above is the useEffect plus fetch pattern that was repeated in every component for years. TanStack Query replaces it with a single useQuery hook that handles loading, error, caching, and refetching all at once.

#Problems Solved by TanStack

#Data Fetching, Caching, and Synchronization Without Boilerplate

TanStack Query eliminates fetching and caching boilerplate. The same query is automatically deduplicated when used by multiple components, cached with staleTime and gcTime, and re-synced when the window regains focus. This directly replaces all that manual useEffect code.

#Flexible Table Rendering with a Low-Level API

Building a table with sorting, filtering, and pagination usually means relying on a table library that constrains your design. TanStack Table gives you full control: columns are defined as data, and you render each cell yourself. Any design can be built.

That's what headless means in practice: the library provides state, sorting logic, and pagination, while you decide the markup, colors, and layout. There's no built-in style to fight against.

#Composable, State-driven Routing

TanStack Router makes the URL a structured source of state. Routes can be nested, their data loaded with loaders, and the entire route tree is type-safe. A wrong URL is caught at build time, not at runtime.

#Modern Data Visualization and UI Virtualization

TanStack Charts offers flexible charts for dashboards, while TanStack Virtual keeps lists with millions of rows smooth because only the visible elements are rendered.

If your data needs to be visualized, Charts provides customizable charts without writing D3 from scratch. If the data you display is enormous, Virtual makes sure the browser isn't overwhelmed.

#TanStack in Today's JavaScript Ecosystem

Today TanStack has become the de facto standard for data needs in many React applications. TanStack Query is used in almost every app that needs server state, TanStack Table for enterprise datagrids, and TanStack Router is increasingly popular as a type-safe router.

TanStack's position is unique because it isn't a monolith. You can use Query without Table, or Router without Query. All the libraries work together but remain independent — that's the combination we'll build from episode 3 through 23.

#Conclusion

Episode 1 closes out TanStack's backstory: from React Query born in 2019, its expansion into a library family covering Query, Table, Router, Virtual, and Charts, to the headless, performance, and framework-agnostic philosophy that unifies them all.

Key takeaways:

• TanStack was born from React Query by Tanner Linsley in 2019.
• Package names now use the @tanstack/* prefix.
• TanStack shares the headless, performance, and framework-agnostic philosophy.
• Query eliminates fetching and caching boilerplate.
• Table, Router, Virtual, and Charts solve different data-driven UI problems.
• The five libraries can be used together or standalone.

In the next episode, episode 2, we'll discuss core concepts and main architecture — how QueryClient and cache work in TanStack Query, the plugin and column system in TanStack Table, state management and loaders in TanStack Router, and how the Virtualizer measures the viewport and renders items. Make sure your understanding of the philosophy is solid, because the technical details start now!