🏃Pakai Tanstack Query, Waktunya Meninggalkan useState dan useEffect

Dalam dunia React, salah satu pola yang paling sering kita jumpai ketika berinteraksi dengan API adalah kombinasi useState dan useEffect. Namun, dengan hadirnya TanStack Query (dulu dikenal sebagai React Query), pendekatan tersebut kini terasa kuno. TanStack Query menawarkan cara yang lebih deklaratif, efisien, dan mudah untuk melakukan fetching, caching, dan updating data async.

Kenapa Harus Meninggalkan useState dan useEffect?

Biasanya, untuk mengambil data dari API, kita menulis kode seperti ini:

const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  fetch('/api/data')
    .then((res) => res.json())
    .then(setData)
    .catch(setError)
    .finally(() => setLoading(false));
}, []);

Kode ini berfungsi, tapi repetitif dan rawan kesalahan, terutama jika kita ingin menambahkan fitur seperti refetch otomatis, caching, stale data control, dan synchronization antar komponen.

Dengan TanStack Query, kita bisa menyederhanakannya menjadi:

import { useQuery } from '@tanstack/react-query';

const fetchData = async () => {
  const res = await fetch('/api/data');
  if (!res.ok) throw new Error('Network response was not ok');
  return res.json();
};

function MyComponent() {
  const { data, error, isLoading } = useQuery({
    queryKey: ['myData'],
    queryFn: fetchData
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

Dari potongan kode di atas, kita bisa lihat bahwa kode menjadi lebih declarative dan maintainable. TanStack Query mengelola state secara otomatis, dan kita hanya perlu fokus pada fetching data.

Manfaat Utama TanStack Query

1. Caching Otomatis

TanStack Query menyimpan hasil fetch di cache. Kalau komponen di-unmount dan kemudian di-mount kembali, Tanstack bisa menampilkan data lama dulu sambil mem-fetch yang baru.

2. Refetch Otomatis

TanStack Query secara otomatis bisa melakukan refetch data saat user kembali ke tab browser atau saat koneksi internet pulih. Ini salah satu fitur yang saya sukai.

3. Pengelolaan Status Lebih Mudah

Status isLoading, error, dan data sudah tersedia langsung dari useQuery. Kita tidak perlu lagi membuat banyak useState.

4. Shared State Antar Komponen

Data yang di-fetch oleh satu komponen bisa langsung digunakan oleh komponen lain tanpa refetch, selama memakai queryKey yang sama.

5. Devtools

TanStack Query menyediakan devtools untuk debugging query, melihat cache, dan memantau status request secara visual.

QueryClient dan useQueryClient

Untuk penggunaan lanjutan, kita bisa menggunakan QueryClient untuk mengatur global config, dan useQueryClient untuk mengakses atau memodifikasi cache langsung:

import { QueryClient, QueryClientProvider, useQueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  );
}

function RefetchButton() {
  const queryClient = useQueryClient();

  return <button onClick={() => queryClient.invalidateQueries(['myData'])}>Refresh Data</button>;
}

Kesimpulan

TanStack Query adalah jawaban modern untuk manajemen data async di React. Dengan hanya mengganti useState dan useEffect ke useQuery, kita bisa mendapatkan banyak fitur powerful yang biasanya membutuhkan banyak boilerplate. Jadi, kalau teman-teman masih pakai useEffect buat fetching data — mungkin ini saatnya move on.

Terima kasih sudah mampir ke blog saya, sampai ketemu di blog berikutnya!