React Zustand Implementation

Table of Contents

Apa itu Zustand?

Zustand adalah state management library yang ringan dan mudah digunakan untuk React. Dibandingkan dengan Redux, Zustand memiliki sintaks yang lebih sederhana dan tidak memerlukan boilerplate yang banyak.

Mengapa Memilih Zustand?

1. Ringan: Ukuran library yang kecil (<1KB).
2. Mudah Digunakan: Tidak memerlukan setup yang kompleks.
3. Real-Time Updates: State dapat diupdate secara real-time tanpa re-render yang tidak perlu.
4. DevTools Support: Mendukung integrasi dengan React DevTools.

Setup Zustand

Install Zustand menggunakan npm atau yarn:

npm install zustand

Membuat Store

Buat file store/userStore.ts untuk mengelola state user:

import { create } from "zustand";

interface UserState {
  user: { id: number; name: string; role: string } | null;
  setUser: (user: { id: number; name: string; role: string }) => void;
  clearUser: () => void;
}

export const useUserStore = create<UserState>(set => ({
  user: null,
  setUser: user => set({ user }),
  clearUser: () => set({ user: null }),
}));

Menggunakan State Global di Komponen

Contoh penggunaan Zustand di komponen:

import { useUserStore } from "../store/userStore";

const UserProfile = () => {
  const user = useUserStore(state => state.user);
  const setUser = useUserStore(state => state.setUser);
  const clearUser = useUserStore(state => state.clearUser);

  return (
    <div>
      {user ? (
        <>
          <h1>Welcome, {user.name}</h1>
          <p>Role: {user.role}</p>
          <button onClick={clearUser}>Logout</button>
        </>
      ) : (
        <button
          onClick={() => setUser({ id: 1, name: "John Doe", role: "admin" })}
        >
          Login
        </button>
      )}
    </div>
  );
};

export default UserProfile;

Kesimpulan

Zustand adalah solusi yang bagus untuk mengelola state global di aplikasi React. Dengan sintaks yang sederhana dan performa yang ringan, Zustand cocok untuk proyek kecil hingga besar.

Explore Zustand