Menggunakan Zustand untuk State Management di React

Ketika membuat aplikasi React, kita sering kali menghadapi kebutuhan untuk mengelola state (data) yang dipakai oleh banyak komponen. Pada awalnya, React menyediakan state di dalam komponen menggunakan useState atau useReducer. Namun, seiring aplikasi semakin kompleks, mengelola state antar komponen bisa menjadi rumit.

Biasanya, developer mengenal Redux atau Context API untuk mengatasi hal ini. Namun, kedua cara tersebut kadang terasa berat dan ribet untuk project sederhana. Nah, di sinilah Zustand hadir sebagai solusi ringan, simpel, tapi tetap powerful untuk state management di React.

Apa Itu Zustand?

Zustand adalah sebuah library state management untuk React yang ringan, sederhana, dan cepat.

• Tidak butuh boilerplate panjang seperti Redux.
• Bisa dipakai dengan mudah hanya dalam beberapa baris kode.
• Mendukung React hooks sepenuhnya.

Dengan Zustand, kita bisa membuat store (tempat menyimpan data) lalu memanggilnya di komponen mana pun tanpa harus pusing dengan prop drilling.

Instalasi Zustand

Untuk memulai, kita perlu menginstalnya dulu di project React:

npm install zustand

Atau jika menggunakan Yarn:

yarn add zustand

Membuat Store dengan Zustand

Store di Zustand biasanya dibuat dalam file terpisah. Misalnya kita ingin mengelola counter sederhana:

// store/counterStore.js
import { create } from "zustand";

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

export default useCounterStore;

Penjelasan:

• count adalah state awal.
• increase, decrease, dan reset adalah fungsi untuk mengubah state.
• set digunakan untuk memperbarui state, mirip dengan setState di React.

Menggunakan Store di Komponen

Sekarang kita bisa menggunakan useCounterStore di komponen React:

// Counter.jsx
import React from "react";
import useCounterStore from "./store/counterStore";

const Counter = () => {
  const { count, increase, decrease, reset } = useCounterStore();

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={increase}>Tambah</button>
      <button onClick={decrease}>Kurang</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default Counter;

Dengan cara ini, kita bisa memakai state count di berbagai komponen tanpa harus mengoper data lewat props.

Kenapa Harus Zustand?

Beberapa alasan kenapa banyak developer suka dengan Zustand:

• Ringan – ukurannya kecil dan tidak membuat aplikasi jadi berat.
• Mudah dipakai – cukup beberapa baris kode sudah jalan.
• Fleksibel – bisa dipakai untuk state kecil hingga kompleks.
• Tidak ribet – tidak perlu reducer panjang atau context yang berlapis-lapis.

Studi Kasus Sederhana

Misalnya, kita membuat aplikasi todo list. Dengan Zustand, store-nya bisa seperti ini:

// store/todoStore.js
import { create } from "zustand";

const useTodoStore = create((set) => ({
  todos: [],
  addTodo: (text) =>
    set((state) => ({
      todos: [...state.todos, { id: Date.now(), text, done: false }],
    })),
  toggleTodo: (id) =>
    set((state) => ({
      todos: state.todos.map((todo) =>
        todo.id === id ? { ...todo, done: !todo.done } : todo
      ),
    })),
  clearTodos: () => set({ todos: [] }),
}));

export default useTodoStore;

Lalu di komponen React, kita bisa langsung pakai useTodoStore untuk menampilkan, menambah, atau menghapus todo. Sangat simpel!

Kesimpulan

Bagi pemula yang ingin belajar state management di React, Zustand adalah pilihan tepat karena:

• Mudah dipelajari.
• Tidak butuh banyak konfigurasi.
• Cocok untuk project kecil maupun besar.
• Dengan menggunakan Zustand, pengelolaan state menjadi lebih simpel, rapi, dan tidak bikin pusing.