TanStack telah meluncurkan beta Table v9, sebuah pustaka data-grid yang memungkinkan pengembang untuk memilih hanya fitur yang mereka butuhkan. Ukuran bundle menyusut menjadi sekitar 5 KB dan penundaan interaction-to-next-paint (INP) yang membuat proses pengurutan atau penyaringan terasa lambat kini menghilang.

Mengapa perubahan ini penting

Pada v8, pustaka ini menyertakan setiap bagian logika grid—pengurutan, penyaringan, paginasi, pemilihan baris, pengelompokan—terlepas dari apakah proyek tersebut menggunakannya atau tidak. Kode tambahan tersebut berjalan di thread utama, memperbesar ukuran bundle, dan menambah latensi pada tindakan pengguna. Untuk dasbor yang membutuhkan tabel cepat dan responsif, jeda beberapa milidetik saja dapat mendorong skor INP ke rentang yang buruk.

Apa yang berbeda di v9

  • Modul fitur opt-in – Impor hanya bagian yang benar-benar Anda gunakan. Lewati pengurutan, dan kode pengurutan tidak akan pernah masuk ke dalam bundle.
  • Integrasi TanStack Store – Kelola state dengan store yang granular, sehingga memperbarui satu baris tidak akan memicu re-render penuh pada bilah filter atau UI tidak terkait lainnya.
  • Penggunaan memori yang lebih rendah – Lebih sedikit objek dan array akan meringankan tekanan pada JavaScript heap selama sesi yang panjang.

Perubahan ini menghasilkan ukuran unduhan yang lebih kecil (pustaka dapat berukuran mendekati 5 KB untuk daftar sederhana) dan interaksi yang lebih lancar saat grid sedang sibuk.

Siapa yang akan diuntungkan

  • Tim frontend yang membangun alat internal, panel admin, atau dasbor SaaS di mana tabel adalah elemen UI utama.
  • Situs yang berfokus pada performa yang memantau Core Web Vitals; INP yang lebih rendah secara langsung meningkatkan metrik tersebut.

Apa yang tidak diperbaiki oleh v9

Peningkatan ini menargetkan kode yang Anda kendalikan. Perubahan ini tidak akan secara ajaib mempercepat halaman yang menarik payload JSON yang masif, juga tidak akan menutupi biaya dari skrip pihak ketiga yang berat. Kumpulan data besar tetap membutuhkan paginasi yang tepat, dan latensi jaringan tetap menjadi masalah terpisah.

Jalur migrasi praktis

  1. Identifikasi tabel terberat – Cari daftar pesanan, grid inventaris, atau tampilan CRM yang sudah menunjukkan jeda yang nyata.
  2. Tangkap metrik dasar (baseline) – Catat INP dan durasi long-task pada halaman-halaman tersebut sebelum melakukan perubahan apa pun.
  3. Migrasikan satu per satu grid – Ganti impor v8 dengan set modul v9, dan aktifkan hanya fitur yang benar-benar digunakan oleh layar tersebut.
  4. Hindari bundle stockFeatures yang bersifat umum – Mengambil set fitur default akan membatalkan tujuan penghematan ukuran.
  5. Uji kembali interaksi – Ukur kembali pengurutan, penyaringan, dan pemilihan untuk mengonfirmasi peningkatan performa.

Sanggahan: bukan solusi ajaib

Beberapa pengembang mungkin berharap v9 dapat menyelesaikan setiap masalah UI yang lambat. Kenyataannya, keuntungan pustaka ini dibatasi oleh seberapa banyak kode kustom yang dapat Anda pangkas. Jika hambatan (bottleneck) sebuah tabel adalah volume baris yang sangat banyak atau API server yang tidak efisien, pengurangan ukuran bundle akan memiliki dampak yang terbatas.

Apa yang perlu diperhatikan selanjutnya

Intisari: TanStack Table v9 memberi Anda cara konkret untuk berhenti membayar fungsionalitas grid yang tidak digunakan. Dengan hanya mengimpor modul yang diperlukan dan menggunakan store yang granular, Anda dapat memangkas beberapa kilobita dari bundle Anda dan menghadirkan interaksi tabel yang jauh lebih responsif—asalkan Anda menyandingkan peningkatan ini dengan strategi penanganan data yang masuk akal.