Belajar TanStack - Sejarah, Latar Belakang & Mengapa Membutuhkan TanStack

#Pendahuluan

Sebelum menulis kode, penting memahami dari mana TanStack berasal dan masalah apa yang coba diselesaikannya. Episode 1 membuka cerita: dari kelahiran React Query sebagai library kecil, sampai menjadi keluarga library bernama TanStack yang mencakup Query, Table, Router, Virtual, dan Charts.

TanStack lahir dari frustrasi nyata. Membangun aplikasi data-driven selalu berulang menulis kode yang sama: fetching dengan state loading dan error, caching, tabel kompleks, routing dengan loading state, serta render item dalam jumlah besar. Kelima library itu menjadi satu keluarga karena berbagi filosofi yang sama.

Episode ini akan mengajak kalian memahami evolusi, filosofi, dan masalah yang diselesaikan TanStack, sehingga keputusan memakai TanStack di project kalian menjadi keputusan yang sadar.

Struktur episodenya sederhana: sejarah dan perluasan keluarga library, tiga filosofi utama, lalu pemetaan setiap masalah ke library yang menyelesaikannya. Dengan pola pikir ini, materi teknis di episode 2 sampai 23 akan lebih mudah dicerna karena kalian tahu alasan di balik setiap desain.

#Asal-usul React Query dan Kelahiran TanStack

#Dari react-query ke TanStack Query

TanStack berawal dari React Query, dirilis oleh Tanner Linsley sekitar tahun 2019. Saat itu, data fetching di React masih dilakukan manual: useEffect plus fetch, dengan state loading, error, dan data ditulis sendiri untuk setiap request. React Query merangkum semua itu ke satu hook dengan caching dan deduplication otomatis.

Pada 2021, seiring perluasan ke framework lain, React Query berganti nama menjadi TanStack Query dengan package @tanstack/react-query. Sekaligus nama TanStack resmi dipakai sebagai brand keluarga library.

npm i @tanstack/react-query

Perintah npm i @tanstack/react-query adalah cara menginstall TanStack Query versi sekarang — bukan react-query. Perubahan nama ini menandai komitmen TanStack terhadap sifat framework-agnostic.

#Perluasan: Table, Router, Virtual, dan Charts

Satu per satu library lain bergabung ke keluarga TanStack:

• TanStack Table: dari react-table, pustaka pembuat tabel headless dengan API kolom yang fleksibel.
• TanStack Router: router type-safe dan state-driven untuk React, lahir sebagai respons atas keterbatasan router konvensional.
• TanStack Virtual: pemindai jendela untuk merender list raksasa secara efisien.
• TanStack Charts: visualisasi data berbasis D3 dengan API modern.
• TanStack Form: form headless dengan validasi dan state yang terkontrol penuh.
• TanStack Start: framework full-stack berbasis TanStack Router untuk aplikasi end-to-end.

Perluasan ini menunjukkan satu pola: setiap library lahir untuk menyelesaikan masalah UI data-driven yang spesifik, lalu disatukan dalam brand TanStack. Keluarga yang terbentuk tetap saling independen, tetapi bekerja mulus saat dipakai bersama.

#Filosofi TanStack: Headless, Performance, Framework-Agnostic

Tiga nilai menyatukan seluruh keluarga TanStack:

• Headless: library hanya menyediakan logika dan state, tanpa UI siap pakai. Kalian bebas menentukan tampilan sendiri. Table tanpa gaya bawaan, Router tanpa layout paksa.
• Performance: semua library dirancang meminimalkan render ulang dan pekerjaan yang tidak perlu. Virtual membuktikan ini dengan hanya merender item yang terlihat layar.
• Framework-agnostic: core library ditulis tanpa ketergantungan ke framework tertentu, lalu adapter disediakan untuk React, Solid, Svelte, dan Vue. Skill TanStack bisa dipakai lintas framework.

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)
    })
}, [])

Kode di atas adalah pola useEffect plus fetch yang selama bertahun-tahun diulang di setiap komponen. TanStack Query menggantinya dengan satu hook useQuery yang menangani loading, error, caching, dan refetching sekaligus.

#Masalah yang Diselesaikan TanStack

#Data Fetching, Caching, dan Synchronization Tanpa Boilerplate

TanStack Query menghilangkan boilerplate fetching dan caching. Query yang sama otomatis di-deduplicate saat dipakai beberapa komponen, di-cache dengan staleTime dan gcTime, serta disinkronkan ulang saat window fokus kembali. Ini langsung menggantikan seluruh kode useEffect manual.

#Table Rendering yang Fleksibel dengan Akses API Rendah

Membangun tabel dengan sorting, filter, dan pagination biasanya berarti bergantung pada library tabel yang membatasi desain. TanStack Table memberi kontrol penuh: kolom didefinisikan sebagai data, dan kalian yang merender tiap sel. Desain apa pun bisa dibangun.

Inilah arti headless dalam praktiknya: library menyediakan state, logika sorting, dan pagination, sementara kalian menentukan markup, warna, dan tata letak. Tidak ada gaya bawaan yang harus dipertarungkan.

#Routing yang Composable dan State-driven

TanStack Router menjadikan URL sebagai sumber state yang terstruktur. Routes bisa di-nest, di-load datanya dengan loader, dan seluruh tree route bersifat type-safe. URL yang salah terdeteksi saat build, bukan saat runtime.

#Visualisasi Data Modern dan Virtualisasi UI

TanStack Charts menawarkan chart fleksibel untuk dashboard, sedangkan TanStack Virtual memungkinkan list jutaan baris tetap lancar karena hanya elemen terlihat yang di-render.

Jika data harus divisualisasikan, Charts memberikan chart yang bisa dikustomisasi tanpa harus menulis D3 dari nol. Jika data yang ditampilkan sangat banyak, Virtual memastikan browser tidak kewalahan.

#TanStack di Ekosistem JavaScript Saat Ini

Saat ini TanStack menjadi standar de facto untuk kebutuhan data di banyak aplikasi React. TanStack Query dipakai di hampir semua aplikasi yang memerlukan server state, TanStack Table untuk datagrid enterprise, dan TanStack Router semakin populer sebagai router type-safe.

Posisi TanStack unik karena tidak menjadi monolith. Kalian bisa memakai Query tanpa Table, atau Router tanpa Query. Semua library saling bekerja sama tapi tetap independen — kombinasi inilah yang akan kita bangun dari episode 3 sampai 23.

#Penutup

Episode 1 menutup cerita latar TanStack: dari React Query yang lahir di 2019, perluasan menjadi keluarga library yang mencakup Query, Table, Router, Virtual, dan Charts, hingga filosofi headless, performance, dan framework-agnostic yang menyatukan semuanya.

Inti yang harus dibawa pulang:

• TanStack lahir dari React Query karya Tanner Linsley pada 2019.
• Nama package sekarang memakai prefix @tanstack/*.
• TanStack berbagi filosofi headless, performance, dan framework-agnostic.
• Query menghilangkan boilerplate fetching dan caching.
• Table, Router, Virtual, dan Charts menyelesaikan masalah UI data-driven yang berbeda.
• Kelima library bisa dipakai bersama maupun berdiri sendiri.

Di episode 2 selanjutnya kita akan membahas konsep dasar dan arsitektur utama — bagaimana QueryClient dan cache bekerja di TanStack Query, sistem plugin dan kolom di TanStack Table, state management dan loader di TanStack Router, serta cara Virtualizer mengukur viewport dan merender item. Pastikan pemahaman filosofi kalian sudah kuat, karena detail teknis dimulai sekarang!