Zustand: State Management Tanpa Drama

Jika kamu bosan dengan kompleksitas Redux atau verbose-nya Context API, Zustand adalah jawabannya.

Setup Super Mudah

import { create } from 'zustand';

interface BearStore {
  bears: number;
  increase: () => void;
}

const useBearStore = create<BearStore>((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
}));

Penggunaan di Komponen

function BearCounter() {
  const { bears, increase } = useBearStore();
  return (
    <div>
      <p>{bears} ekor beruang</p>
      <button onClick={increase}>Tambah</button>
    </div>
  );
}

Fitur-Fitur Keren Zustand

Persist ke localStorage

import { persist } from 'zustand/middleware';

const useStore = create(persist(
  (set) => ({ count: 0 }),
  { name: 'my-store' }
));

Subscriptions

Zustand mendukung subscriptions tanpa React untuk integrasi dengan library lain.

Kesimpulan

Zustand adalah pilihan sempurna untuk state management di aplikasi React modern — ringan, intuitif, dan powerful.