React Query: Cara Termudah Mengelola Data Fetching di Aplikasi React

Apa Itu React Query?

React Query adalah library untuk server state management di React. Library ini membantu menangani pengambilan data API, caching, update data, hingga otomatis melakukan refetch tanpa harus menulis banyak kode.

Dengan React Query:

• Data lebih terorganisir

• Fetching jadi lebih efisien

• Kode lebih clean dan mudah dipelihara

Kenapa React Query Penting untuk Aplikasi Modern?

Ketika aplikasi kamu terhubung ke API, ada beberapa masalah umum:

• Loading state yang harus diatur manual

• Error handling yang sering berulang

• Data harus di-cache agar tidak fetch ulang

• Update data sering membingungkan

• Banyak boilerplate di useEffect

React Query hadir sebagai solusi. Library ini memiliki fitur lengkap untuk mengelola data dari server.

Kelebihan Utama React Query

1. Caching otomatis

React Query akan menyimpan data sehingga tidak perlu memanggil API berulang kali.

2. Refetch otomatis

Saat browser kembali aktif atau ada perubahan queryKey, data otomatis di-refresh.

3. Optimistic Update

Kamu bisa mengupdate UI dulu, lalu sinkron dengan server. Sangat berguna untuk aplikasi yang interaktif.

4. Error & Loading State otomatis

Tidak perlu lagi menulis state manual seperti:

const [loading, setLoading] = useState(false);

Semua sudah ditangani.

5. DevTools bawaan

Memantau query state jadi super mudah.

Cara Menggunakan React Query (Contoh Kode)

Untuk memulai, install dulu:

npm install @tanstack/react-query axios

Tambahkan QueryClient di root aplikasi:

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

const queryClient = new QueryClient();

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

Kemudian ambil data:

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

async function fetchUsers() {
  const { data } = await axios.get('https://api.example.com/users');
  return data;
}

export default function UserList() {
  const { data, error, isLoading } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
  });

  if (isLoading) return <p>Memuat data...</p>;
  if (error) return <p>Terjadi kesalahan saat mengambil data</p>;

  return (
    <ul>
      {data.map((user: any) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Kapan Kamu Perlu Menggunakan React Query?

Gunakan React Query jika:

• Aplikasi kamu sering berinteraksi dengan API

• Butuh caching otomatis

• Data sering berubah (produk, transaksi, user)

• Kamu ingin meminimalisir logic di useEffect

• Kamu ingin aplikasi yang lebih cepat dan responsif

Kesimpulan

React Query adalah salah satu library terbaik untuk mengelola server state di React. Dengan fitur seperti caching otomatis, refetching, dan error handling yang mudah, React Query membantu developer membangun aplikasi yang lebih cepat, lebih rapi, dan lebih maintainable.

Jika kamu sedang mencari cara meningkatkan kualitas kode dan performa aplikasi React, React Query adalah pilihan yang sangat tepat.