Bab 9: State Management dengan Zustand

Mengelola state global dengan cara yang sederhana dan efisien.

Keterbatasan `useState` & `Context`

Untuk state yang sederhana, `useState` sudah cukup. Untuk berbagi state ke banyak komponen, `Context API` sangat berguna. Namun, saat aplikasi menjadi sangat besar, `Context API` dapat menyebabkan masalah performa karena semua komponen yang menggunakan context akan me-render ulang setiap kali state berubah, bahkan jika mereka tidak menggunakan bagian state yang berubah tersebut.

Di sinilah library State Management seperti Zustand, Redux, atau Jotai berperan. Mereka memberikan cara yang lebih teroptimasi untuk mengelola dan mengakses state global.

Mengenal Zustand

Zustand adalah library manajemen state yang sangat ringan dan modern. Filosofinya adalah kesederhanaan. Anda tidak perlu membungkus aplikasi Anda dengan `Provider` seperti pada Context API.

Cara Kerja Zustand

1. Buat Store

Buat sebuah store menggunakan fungsi `create`. Store ini adalah sebuah hook yang berisi state dan fungsi untuk mengubah state tersebut.

import { create } from 'zustand';

const useCartStore = create((set) => ({
  items: 0,
  addItem: () => set((state) => ({ items: state.items + 1 })),
}));

2. Gunakan di Komponen Mana Saja

Impor dan panggil hook `useCartStore` di komponen mana pun yang membutuhkan akses ke state keranjang belanja.

function CartDisplay() {
  const items = useCartStore((state) => state.items);
  return <p>Item: {items}</p>;
}

function CartControls() {
    const addItem = useCartStore((state) => state.addItem);
    return <button onClick={addItem}>Tambah Item</button>
}

Contoh: Keranjang Belanja Sederhana

Perhatikan bagaimana `CartDisplay` dan `CartControls` dapat berkomunikasi dan berbagi state tanpa dihubungkan oleh props sama sekali.

Hasil Tampilan Interaktif:

Perhatikan bagaimana kedua komponen di bawah ini berbagi state tanpa props.

🛒 Item di Keranjang: 0