TanStack Query

Masalah saat tabel mulai memiliki pencarian dan halaman

Pada tabel daftar user, role, feature, maupun log audit, pengguna sering mengetik kata kunci pencarian sambil berpindah halaman atau mengubah jumlah baris per halaman. Kalau dikelola dengan useState dan useEffect manual, kita harus mengurus pembatalan request lama, indikator loading yang berkedip, dan penyegaran data setelah tambah atau hapus.

Menahan tampilan lama saat data baru dimuat

Dengan TanStack Query, setiap kombinasi parameter pencarian (page, limit, q) menjadi kunci cache tersendiri. Saat pengguna berpindah dari halaman 1 ke halaman 2, opsi placeholderData: keepPreviousData menahan baris halaman 1 tetap terlihat tipis sembari halaman 2 diambil di latar belakang, sehingga tinggi tabel tidak melompat-lompat.

export function useUsers(params: ListParams) {
  return useQuery({
    queryKey: ["users", params],
    queryFn: () => fetchJson<PaginatedResult<UserRow>>("/api/users", params),
    placeholderData: keepPreviousData,
  });
}

Pengalaman tabel yang terasa tenang datang dari dua hal: tidak menembak server di setiap ketukan huruf, dan tidak mengosongkan layar saat berpindah halaman.

Membandingkan dua pendekatan di satu proyek

• Komponen SearchBox menunda pengiriman kata kunci selama 300 milidetik (debounce) dan otomatis mengembalikan nomor halaman ke 1 saat kata kunci berubah.
• Tabel seperti User, Role, Feature, Audit Log, dan Login Attempt mengambil data lewat pasangan TanStack Query + Route Handler GET.
• Sebaliknya, halaman seperti Matriks Izin dan Master Data Item dirender langsung lewat Server Component pada pemuatan awal lalu disegarkan dengan router.refresh() setelah mutasi, sehingga kedua pola arsitektur dapat dibandingkan langsung.

Ringkasnya

TanStack Query mengambil alih kerumitan siklus hidup data di browser, membuat pencarian dan perpindahan halaman terasa instan tanpa menulis logika sinkronisasi state yang rapuh.