Mengapa Zustand?
Zustand adalah library state management untuk React yang menawarkan pendekatan sederhana dengan boilerplate minimal. Dibandingkan Redux yang membutuhkan reducer, action, dan dispatch, Zustand memungkinkan state dan actions didefinisikan langsung dalam satu store.
Zustand cocok untuk aplikasi yang membutuhkan global state management tanpa struktur yang terlalu kompleks.
Setup dan Store Dasar
Install Zustand menggunakan npm:
npm install zustandBuat store menggunakan create() dan definisikan state beserta actions di dalamnya. Pendekatan ini membuat pengelolaan state lebih ringkas dan mudah dipahami.
Tidak diperlukan Provider wrapper, sehingga store dapat langsung digunakan oleh komponen React yang membutuhkannya.
Selector dan Subscriptions
Salah satu keunggulan Zustand adalah kemampuan menggunakan selector untuk mengambil bagian tertentu dari state.
const count = useCountStore(state => state.count)Dengan selector, komponen hanya melakukan subscription terhadap state yang diperlukan. Hal ini membantu mengurangi re-render yang tidak diperlukan, terutama pada aplikasi dengan state yang sering berubah.
Async Actions
Zustand juga mendukung async actions secara langsung. Anda dapat melakukan request API, mengubah loading state, menyimpan hasil response, dan menangani error dalam satu function.
Pendekatan ini membuat proses pengambilan data lebih sederhana tanpa harus menambahkan middleware seperti Redux Thunk untuk kebutuhan dasar.
Middleware Devtools dan Persist
Zustand menyediakan middleware seperti devtools dan persist.
Middleware devtools() dapat digunakan untuk membantu debugging state melalui Redux DevTools. Sementara persist() memungkinkan state disimpan secara otomatis ke localStorage atau storage lain yang dikonfigurasi.
Persist juga berguna untuk kebutuhan seperti menyimpan preferensi pengguna, tema aplikasi, atau state tertentu yang perlu tetap tersedia setelah halaman di-refresh.
Testing Store
Store Zustand relatif mudah untuk diuji karena state dan actions dapat dipanggil secara langsung.
Dalam unit test, Anda dapat menjalankan action kemudian melakukan assertion terhadap perubahan state. Untuk menjaga setiap test tetap terisolasi, reset store ke initial state setelah atau sebelum test dijalankan.
Kapan Menggunakan Zustand?
Zustand cocok untuk aplikasi React yang membutuhkan state global seperti authentication, shopping cart, modal, filter, theme, dan user preferences.
Jika kebutuhan state management sangat kompleks dan membutuhkan pola arsitektur yang ketat, Redux Toolkit masih dapat menjadi pilihan. Namun, untuk banyak aplikasi React modern, Zustand menawarkan keseimbangan antara kesederhanaan, performa, dan fleksibilitas.
Kesimpulan
Zustand menjadi pilihan menarik untuk state management React karena API-nya sederhana, minim boilerplate, mendukung selector, async actions, middleware, dan mudah ditest. Dengan pendekatan yang ringan, developer dapat mengelola global state tanpa kompleksitas yang tidak diperlukan.