Mengapa Saya Mulai Mempelajari TanStack Query

Saya mulai mempelajari TanStack Query hari ini.

Ini mengubah cara Anda membangun aplikasi React.

Banyak pengembang mengira ini adalah alat manajemen state seperti Redux. Padahal bukan. Ini menyelesaikan masalah yang berbeda.

Aplikasi React menangani dua jenis state:

• state UI: tombol, modal, dan input. • state Server: data dari API seperti pengguna atau produk.

Kebanyakan pengembang menggunakan useState, useEffect, atau Redux untuk mengelola server state. Hal ini bisa menjadi berantakan dengan cepat. Data server sulit dikelola karena datanya berubah-ubah, membutuhkan caching, dan bisa saja gagal.

TanStack Query adalah pengelola server-state. Ia menangani tugas-tugas ini untuk Anda:

• Mengambil data (Fetching data) • Caching respons • Memperbarui data lama • Refetching di latar belakang • Penanganan error • Status loading • Logika retry

Anda tidak perlu lagi menulis logika loading dan error secara manual. Anda cukup memberi tahu aplikasi data apa yang Anda butuhkan.

Alat ini membuat lapisan cache cerdas antara UI dan API Anda.

Saat UI Anda meminta data, alat ini akan memeriksa cache terlebih dahulu. Jika data tersedia, ia akan menampilkannya secara instan. Ini membuat aplikasi Anda terasa cepat.

Alat ini juga memperbarui data di latar belakang. UI Anda tetap segar tanpa adanya kedipan (flickering).

Ia menangani situasi kompleks secara otomatis:

• Ia melakukan refetch saat Anda memfokuskan kembali jendela (window). • Ia melakukan refetch saat jaringan terhubung kembali. • Ia menampilkan data dari cache saat internet lemah.

Alih-alih menulis hook useEffect yang kompleks, Anda cukup menggunakan satu baris sederhana:

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

Hanya itu yang Anda butuhkan.

Ada alat lain yang tersedia:

• Redux Toolkit: Bagus untuk logika UI yang kompleks tetapi tidak ideal untuk server state. • SWR: Alternatif ringan untuk caching yang mudah. • Apollo Client: Terbaik untuk API GraphQL.

Gunakan TanStack Query jika Anda bekerja dengan REST API dan menginginkan UI yang cepat dengan lebih sedikit kode.

Pengembangan frontend modern adalah tentang performa dan sinkronisasi data. TanStack Query menangani bagian-bagian sulit sehingga Anda dapat fokus pada fitur.

Menulis lebih sedikit kode bukanlah tujuannya. Membangun sistem yang lebih cerdaslah tujuannya.

Source: https://dev.to/usama_dev/why-i-started-learning-react-query-tanstack-query-today-5ceg