Menguasai State Management React: Zustand vs TanStack Query

Kebingungan Klasik dalam State Management

Banyak pengembang React pemula mencoba memasukkan semua data—termasuk respons fetch API—ke dalam global state store seperti Redux atau Zustand. Hal ini sering mengakibatkan boilerplate kode yang membengkak untuk menangani isFetching, error, cacheInvalidation, dan retry.

---

1. Server State vs Client State

Kunci utama merancang arsitektur state yang bersih adalah memisahkan kedua jenis state berikut:

• Server State: Data yang berasal dari basis data eksternal (misal: profil pengguna, daftar postingan blog, daftar produk). Data ini bersifat asinkron dan berpotensi usang (stale).
• Client State: Data yang murni hidup di browser klien (misal: status modal terbuka/tutup, filter pencarian aktif, preferensi tema).

---

2. TanStack Query untuk Server State

Gunakan TanStack Query (React Query) khusus untuk menangani Server State:

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

export function useUserProfile(userId: string) {
  return useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetch(`/api/users/${userId}`).then(res => res.json()),
    staleTime: 1000 * 60 * 5, // Cache valid selama 5 menit
  });
}

---

3. Zustand untuk Client State

Gunakan Zustand untuk menyimpan UI state global yang super ringan:

import { create } from 'zustand';

interface UIStore {
  isSidebarOpen: boolean;
  toggleSidebar: () => void;
}

export const useUIStore = create<UIStore>((set) => ({
  isSidebarOpen: false,
  toggleSidebar: () => set((state) => ({ isSidebarOpen: !state.isSidebarOpen })),
}));

---

Kesimpulan

Dengan memisahkan TanStack Query untuk data API dan Zustand untuk antarmuka pengguna, aplikasi React Anda menjadi jauh lebih rapi, bebas dari bugs caching manual, dan sangat responsif!