Tutorial Dasar Zustand: Cara Install dan Membuat Global State di React

Saat project React kalian makin besar, kita sering mulai dibuat pusing dengan urusan state, apalagi kalau datanya harus dibagikan ke banyak component. Yang awalnya cuma menggunakan useState di satu component, tiba-tiba jadi harus mengirim props ke children dan lama-lama seluruh tree component ikut terkena imbasnya. Begitu kamu menambah fitur baru atau memindahkan posisi component, props yang dilempar jadi banyak dan mulai susah untuk dilacak.

Kamu mungkin bisa coba menggunakan Context API, Tapi begitu logic-nya semakin kompleks, mulai ada beberapa context, nested provider, dan file yang makin panjang. Hasilnya? State makin sulit dirawat, re-render makin tidak jelas penyebabnya. Nah, di titik inilah Zustand muncul sebagai penyelamat kecil yang manis.

Zustand itu adalah state management yang super ringan, mudah dipahami, dan tidak sulit sama sekali. Kamu cukup bikin store kecil dengan beberapa baris kode, dan React-mu langsung punya global state yang bisa diakses di mana saja. Zustand itu “cukup kuat” untuk aplikasi menengah, dan juga “cukup sederhana” buat yang baru pindah dari useState. Jadi sebelum project kamu makin berantakan dan state makin susah dikontrol, sekarang adalah waktu yang tepat untuk mulai menggunakan Zustand. Dan tenang saja, untuk setup-nya sebenarnya simpel.

Oke, langsung aja — kita mulai dari cara instalasi Zustand

Instalasi Zustand

Cukup jalankan command ini :

npm install zustand

atau jika kamu menggunakan Yarn :

yarn add zustand

Membuat Store Pertama

Biasanya, kita mulai dengan membuat store sederhana, misalnya untuk counter. Bikin satu file baru:

src/store/useCounterStore.js

Lalu isi dengan kode berikut:

import { create } from 'zustand';

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

Menggunakan Store di Komponen React

Sekarang kita bisa pakai store tadi di komponen mana saja. Contoh:

import React from 'react';
import { useCounterStore } from '../store/useCounterStore';

export default function Counter() {
  const { count, increase, decrease, reset } = useCounterStore();

  return (
    <div style={{ textAlign: 'center' }}>
      <h1>Count: {count}</h1>
      <button onClick={decrease}>-</button>
      <button onClick={reset}>Reset</button>
      <button onClick={increase}>+</button>
    </div>
  );
}

Ketika tombol ditekan, Zustand akan otomatis meng-update state, dan hanya komponen yang memakai state tersebut yang akan re-render. Dengan begitu, kita sudah melihat bagaimana cara menginstall dan mulai menggunakan Zustand sebagai state management di React.

Pendekatannya yang sederhana, fleksibel, dan minim boilerplate membuatnya jadi pilihan yang pas ketika aplikasi kamu mulai berkembang dan butuh manajemen state yang lebih rapi. Ke depannya, kamu bisa mulai eksplor fitur-fitur lanjutan seperti persist storage, middleware, selector, atau bahkan memecah store menjadi beberapa slice agar struktur kode tetap bersih.