Pelajari Zustand, pustaka state management ringan untuk React. Panduan ini membahas dasar, praktik terbaik, dan contoh kode untuk pemula.

Apa Itu Zustand?

Jika kamu pernah bekerja dengan React, kamu pasti tahu betapa pentingnya mengelola state antar komponen. Saat aplikasi kecil, kamu bisa cukup menggunakan useState dan useContext. Namun, ketika aplikasi semakin kompleks — banyak komponen berbagi data yang sama, dan perubahan state mulai memengaruhi banyak bagian aplikasi — saat itulah manajemen state global menjadi penting.

Zustand hadir sebagai solusi yang ringan, fleksibel, dan modern. Kata Zustand sendiri berasal dari bahasa Jerman yang berarti “state” atau “keadaan”. Dibuat oleh tim yang juga mengembangkan Jotai dan React Spring, pustaka ini menjadi pilihan populer bagi developer yang ingin menggantikan kompleksitas Redux dengan sesuatu yang jauh lebih sederhana.

Zustand memungkinkan kamu membuat global state tanpa perlu boilerplate, tanpa Provider, dan tanpa aksi bertele-tele seperti dispatch atau reducer. Cukup dengan satu hook, kamu sudah bisa mengakses, memperbarui, dan memantau perubahan state di seluruh aplikasi.

Mengapa Memilih Zustand?

Bayangkan kamu sedang membangun aplikasi sederhana dengan fitur counter. Menggunakan Redux, kamu mungkin perlu membuat action, reducer, dan store secara terpisah. Tapi dengan Zustand, semuanya cukup dirangkum dalam satu file pendek.

Zustand sangat ringan — hanya sekitar 1 KB dalam bentuk gzip — tapi tetap powerful. Ia mendukung fitur seperti devtools, persist state, dan kompatibel dengan SSR (Server Side Rendering) seperti di Next.js. Selain itu, Zustand hanya memicu re-render pada komponen yang menggunakan bagian state tertentu, membuat performanya sangat efisien.

Instalasi Zustand

Untuk mulai menggunakan Zustand, kamu cukup memasangnya dengan perintah berikut:

npm install zustand

Atau jika kamu menggunakan Yarn:

yarn add zustand

Selesai! Tidak ada setup tambahan seperti Provider atau konfigurasi store yang rumit. Kamu bisa langsung membuat store-mu sendiri.

Cara Penggunaan Dasar Zustand

Mari kita mulai dengan contoh paling sederhana: Counter App.

1. Membuat Store

Zustand menggunakan fungsi create() untuk membuat store. Misalnya, kita ingin membuat state count dengan dua fungsi increase dan decrease.

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}))

Dalam satu fungsi ini, kita sudah membuat state, mutator function (fungsi untuk mengubah state), dan store global yang bisa diakses dari mana saja di aplikasi.

2. Menggunakan Store di Komponen

Sekarang, kita gunakan store tersebut dalam komponen React:

function Counter() {
  const { count, increase, decrease } = useStore()

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>Tambah</button>
      <button onClick={decrease}>Kurangi</button>
    </div>
  )
}

Sederhana sekali, bukan? Tidak ada reducer, tidak ada context provider. Semua state dapat diakses lewat hook useStore().

Penggunaan Lanjutan Zustand

Meskipun ringan, Zustand juga sangat fleksibel untuk kebutuhan yang lebih kompleks.

Mengambil State Tertentu (Selector)

Zustand memungkinkan komponen hanya berlangganan ke bagian tertentu dari state. Ini berguna agar komponen tidak perlu re-render setiap kali state lain berubah.

const count = useStore((state) => state.count)

Dengan cara ini, React hanya akan me-render ulang komponen jika nilai count berubah, bukan state lainnya.

Menyimpan State ke Local Storage (Persist Middleware)

Kamu mungkin ingin menyimpan data seperti tema atau token login agar tetap tersimpan setelah halaman direfresh. Zustand menyediakan middleware persist untuk tujuan ini.

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

const useAuthStore = create(
  persist(
    (set) => ({
      token: null,
      setToken: (token) => set({ token }),
      logout: () => set({ token: null }),
    }),
    { name: 'auth-storage' }
  )
)

Sekarang state token akan otomatis tersimpan di localStorage dan tetap ada meskipun pengguna merefresh halaman.

Menggabungkan Middleware (Devtools, Persist, dll.)

Kamu juga bisa menggunakan lebih dari satu middleware sekaligus, misalnya devtools untuk debugging.

import { create } from 'zustand'
import { persist, devtools } from 'zustand/middleware'

const useThemeStore = create(
  devtools(
    persist(
      (set) => ({
        theme: 'light',
        toggleTheme: () =>
          set((state) => ({
            theme: state.theme === 'light' ? 'dark' : 'light',
          })),
      }),
      { name: 'theme-storage' }
    )
  )
)

Dengan konfigurasi ini, kamu dapat memantau perubahan state melalui browser devtools, sambil tetap menyimpan datanya secara lokal.

Nested State

Zustand juga bisa menangani nested object tanpa kesulitan. Misalnya, kamu memiliki data pengguna:

const useUserStore = create((set) => ({
  user: { name: 'Fadil', age: 22 },
  setName: (name) => set((state) => ({ user: { ...state.user, name } })),
}))

Saat memanggil setName('Rumasoreng'), maka hanya properti name yang akan berubah tanpa mempengaruhi struktur state lainnya.

Zustand di Next.js (SSR Friendly)

Salah satu kelebihan Zustand adalah kompatibilitasnya dengan Next.js. Namun, kamu tetap harus berhati-hati agar state tidak berbeda antara server dan client (hydration mismatch). Untuk itu, gunakan useEffect untuk memastikan kode hanya berjalan di sisi client:

useEffect(() => {
  // Kode yang hanya dijalankan di client
}, [])

Kamu juga bisa menginisialisasi store di client-side saja jika datanya tergantung pada browser API seperti localStorage.

Testing Zustand

Pengujian Zustand sangat mudah karena kamu bisa mengakses state langsung tanpa perlu render komponen. Berikut contohnya menggunakan React Testing Library:

import { act } from '@testing-library/react'
import { useStore } from './store'

act(() => {
  useStore.getState().increase()
})

expect(useStore.getState().count).toBe(1)

Dengan getState(), kamu bisa membaca dan memodifikasi store langsung di test case tanpa rendering.

Best Practice Saat Menggunakan Zustand

Untuk menjaga agar kode tetap bersih dan efisien, ada beberapa praktik terbaik yang bisa kamu ikuti:

Pertama, gunakan Zustand hanya untuk global state — seperti data user login, tema aplikasi, atau konfigurasi global. Untuk local state (seperti input form, toggle, modal), cukup gunakan useState.

Kedua, gunakan selector (state) => state.property agar React hanya merender ulang bagian yang benar-benar berubah. Ini sangat membantu dalam menjaga performa.

Ketiga, jika kamu menggunakan Next.js atau aplikasi SSR, hindari membaca atau menulis state global sebelum render client-side dimulai. Gunakan middleware persist atau gunakan flag yang menandai apakah komponen sudah di-mount.

Terakhir, jangan menyimpan access token sensitif di state volatile seperti Zustand, kecuali hanya untuk penggunaan sementara. Gunakan mekanisme storage yang lebih aman jika diperlukan.

FAQ Seputar Zustand

1. Apakah Zustand cocok untuk aplikasi besar?
Ya, Zustand bisa digunakan di aplikasi skala kecil hingga besar. Namun, kamu perlu menata struktur store dengan baik agar tidak membingungkan seiring pertumbuhan aplikasi.

2. Apakah Zustand menyimpan state setelah halaman direfresh?
Secara default tidak, tetapi kamu bisa menambahkan middleware persist agar state disimpan di localStorage atau sessionStorage.

3. Apakah Zustand bisa digunakan bersamaan dengan React Context?
Bisa, tapi umumnya tidak perlu karena Zustand sendiri sudah menggantikan kebutuhan Context untuk state global.

4. Bagaimana performa Zustand dibanding Redux?
Zustand jauh lebih ringan dan cepat karena tidak perlu dispatch atau reducer. Ia hanya me-render ulang bagian yang berubah.

5. Apakah Zustand mendukung TypeScript?
Ya, Zustand memiliki dukungan TypeScript yang sangat baik dan bisa menambahkan type untuk store dan action dengan mudah.

Kesimpulan

Zustand adalah solusi state management yang ringan, fleksibel, dan cepat untuk React. Ia meminimalisir boilerplate tanpa mengorbankan kemampuan, membuatnya sangat ideal untuk developer yang ingin fokus pada logika aplikasi, bukan konfigurasi.

Dengan middleware seperti persist dan devtools, kamu bisa membangun store yang powerful hanya dengan beberapa baris kode. Baik untuk aplikasi kecil maupun kompleks, Zustand memberikan keseimbangan antara kesederhanaan dan performa.

Satu hook, satu store, semua state.
Itulah filosofi Zustand.