State Management React dengan Zustand

State management adalah salah satu konsep paling krusial di ekosistem React. Selama bertahun-tahun, Redux menjadi pilihan utama, tapi banyak developer merasa setup-nya terlalu rumit untuk project skala kecil hingga menengah.

Zustand hadir sebagai alternatif minimalis: tanpa boilerplate, tanpa provider, tanpa action type. Cukup store, state, dan aksi.

Apa itu Zustand?

Zustand (bahasa Jerman untuk "state") adalah library state management untuk React yang mengedepankan kesederhanaan. Dengan API berbasis hook, kamu bisa membuat global store dalam hitungan menit.

1npm install zustand

Membuat Store Pertama

Buat file src/store/counter.ts:

1import { create } from 'zustand';
2
3interface CounterState {
4  count: number;
5  increment: () => void;
6  decrement: () => void;
7  reset: () => void;
8}
9
10export const useCounterStore = create<CounterState>((set) => ({
11  count: 0,
12  increment: () => set((state) => ({ count: state.count + 1 })),
13  decrement: () => set((state) => ({ count: state.count - 1 })),
14  reset: () => set({ count: 0 }),
15}));

Tidak ada Provider, tidak ada reducer, tidak ada action creator. Cukup fungsi create yang menerima callback dengan parameter set.

Menggunakan Store di Komponen

1import { useCounterStore } from './store/counter';
2
3function Counter() {
4  const count = useCounterStore((state) => state.count);
5  const increment = useCounterStore((state) => state.increment);
6  const decrement = useCounterStore((state) => state.decrement);
7
8  return (
9    <div className="flex items-center gap-4">
10      <button onClick={decrement}>-</button>
11      <span className="text-2xl font-bold">{count}</span>
12      <button onClick={increment}>+</button>
13    </div>
14  );
15}

Dengan pendekatan selector, komponen hanya re-render ketika bagian state yang dipilih berubah.

Store dengan Data Asynchronous

Zustand tidak membatasi di mana kamu memanggil set — termasuk di dalam async function:

1interface UserState {
2  user: User | null;
3  loading: boolean;
4  fetchUser: (id: string) => Promise<void>;
5}
6
7export const useUserStore = create<UserState>((set) => ({
8  user: null,
9  loading: false,
10  fetchUser: async (id: string) => {
11    set({ loading: true });
12    try {
13      const res = await fetch(`/api/users/${id}`);
14      const user = await res.json();
15      set({ user, loading: false });
16    } catch (error) {
17      set({ loading: false });
18    }
19  },
20}));

Best Practices

1. Gunakan Selector untuk Performa

Selalu gunakan selector untuk menghindari re-render tidak perlu:

1// ❌ Re-render setiap kali state berubah
2const store = useCounterStore();
3
4// ✅ Re-render hanya saat count berubah
5const count = useCounterStore((s) => s.count);

2. Pisahkan Store Berdasarkan Domain

Buat store terpisah untuk fitur yang berbeda:

1// store/auth.ts
2// store/cart.ts
3// store/theme.ts

3. Kombinasikan dengan Persist Middleware

1import { persist } from 'zustand/middleware';
2
3export const useThemeStore = create(
4  persist(
5    (set) => ({
6      theme: 'light',
7      toggle: () =>
8        set((s) => ({ theme: s.theme === 'light' ? 'dark' : 'light' })),
9    }),
10    { name: 'theme-preference' }
11  )
12);

Kapan Harus Pakai Zustand?

Kondisi	Zustand	Redux
Project kecil/menengah	✅ Ideal	❌ Overkill
Butuh boilerplate minimal	✅ Sangat cocok	❌ Banyak setup
Middleware kompleks	⚠️ Terbatas	✅ Banyak pilihan
Tim besar dengan standar ketat	⚠️ Kurang struktur	✅ Sangat terstruktur
Perlu DevTools	✅ Built-in	✅ Redux DevTools

Kesimpulan

Zustand membuktikan bahwa state management tidak harus rumit. Dengan API yang minimalis, performa yang baik, dan fleksibilitas tinggi, Zustand menjadi pilihan tepat untuk project React modern yang ingin menghindari kompleksitas Redux tanpa mengorbankan fitur.

Coba integrasikan Zustand di project selanjutnya dan rasakan sendiri kemudahannya!