Belajar Zustand - Sejarah, Latar Belakang & Mengapa Membutuhkan Zustand

#Pendahuluan

Semua alat lahir dari sebuah masalah. Sebelum memahami Zustand secara teknis, kalian perlu memahami peta evolusi state management di React: kenapa dulu ada Context API, kenapa Redux mendominasi bertahun-tahun, dan kenapa akhirnya library minimalis seperti Zustand muncul. Episode 1 adalah bagian sejarah dan latar belakang yang menjawab pertanyaan paling mendasar: mengapa kalian membutuhkan Zustand?

Kita akan menelusuri evolusi dari prop drilling menuju Context API, lalu Redux yang penuh boilerplate, hingga lahirnya Zustand oleh tim pmndrs pada 2019. Setelah itu kita bedah tiga masalah konkret yang diselesaikan Zustand: boilerplate minimal, re-render selektif, dan ukuran library yang sangat kecil.

#Evolusi State Management di React

#Dari Prop Drilling ke Context API

Di masa awal React, membagikan state antar komponen berarti menurunkannya melalui props dari komponen induk ke anak — pola yang dikenal sebagai prop drilling. Semakin dalam komponen, semakin banyak lapisan props yang harus lewat, sehingga kode susah dipelihara.

React memperkenalkan Context API sebagai jawaban: nilai disediakan di satu titik dan dibaca di mana saja tanpa menurunkan props. Tapi Context punya kelemahan: setiap perubahan nilai context me-render ulang semua konsumennya, dan Context tersedia di atas provider yang harus membungkus aplikasi.

#Redux: Kekuatan dengan Boilerplate

Redux hadir sebagai solusi state management global dengan pola ketat: satu store, action, reducer, dan selector. Kekuatannya pada prediktabilitas dan devtools yang canggih. Namun di aplikasi sederhana, Redux membutuhkan banyak boilerplate: mengatur store, menulis action types, action creators, dan reducer untuk satu fitur kecil.

Boilerplate Redux untuk satu counter

const INCREMENT = 'INCREMENT'
 
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 }
    default:
      return state
  }
}

Perbandingan ini penting: switch (action.type) dan konfigurasi store di atas adalah pola yang harus ditulis berulang. Zustand menghilangkan lapisan ini karena action cukup berupa fungsi di dalam store, tanpa tipe action terpisah.

#Lahirnya Library Minimalis

Pada 2019, tim pmndrs (Poimandres) merilis Zustand — kata Jerman untuk state. Di belakangnya ada Daishi Kato (dai-shi) sebagai maintainer utama. Versi 1 muncul pada 2019, berkembang melalui v2 dan v3, v4 pada 2022, hingga v5 pada 2024 yang menjadi basis series ini dengan perbaikan terus-menerus sampai 2026.

Filosofi Zustand sederhana: store dibuat dengan satu panggilan create(), dipakai langsung sebagai hook, tanpa Provider, tanpa reducer boilerplate, dan tanpa action types. Inilah revolusi kecil yang membuatnya diadopsi ribuan project.

#Peta Waktu Rilis

Untuk memberi konteks perjalanan versi, berikut peta waktu rilis utama Zustand:

v1 rilis 2019: fondasi store global tanpa Provider.
v2 menambahkan middleware eksperimental dan perbaikan selector.
v3 memperluas dukungan TypeScript dan API subscribe.
v4 rilis 2022: middleware dirapikan dan API create berbasis currying.
v5 rilis 2024: penyederhanaan API, dukungan React 19, dan perbaikan typing.

Peta ini menjelaskan kenapa dokumentasi lama kerap memakai bentuk create tanpa kurung ganda — itu gaya versi 3. Di series ini kita konsisten memakai bentuk v5 yang lebih baru.

#Masalah yang Diselesaikan Zustand

#Tanpa Provider dan Boilerplate Minimal

Kalian cukup memanggil create() di file store dan memakai hasilnya di komponen mana pun:

Install zustand di project React

npm i zustand

Tidak ada <Provider> yang membungkus aplikasi, tidak ada penyusunan HOC, tidak ada konfigurasi store terpisah. Store dan action tinggal di satu tempat. npm i zustand menambahkan library inti sekitar 1.2 KB gzipped ke bundle aplikasi — jauh lebih kecil dibanding Redux lengkap dengan react-redux.

#Re-render Selektif

Perbedaan paling penting dengan Context: komponen yang memakai Zustand hanya re-render ketika slice state yang dipilih berubah, karena Zustand berbasis subscribe/notify dengan perbandingan strict equality. Context, sebaliknya, me-render semua konsumen ketika nilai context berubah.

Selector mencegah re-render berlebihan

const count = useCounter((s) => s.count)
const name = useCounter((s) => s.user.name)

Dengan useCounter((s) => s.count), perubahan pada s.user.name tidak akan me-render komponen yang hanya membaca count. Detail teknis subscribe/notify ini kita bedah di episode 2.

#Core yang Bisa Dipakai Tanpa React

Zustand dibangun berlapis: intinya (zustand/vanilla) murni JavaScript tanpa ketergantungan React, dan lapisan React hanyalah jembatan hook. Konsekuensinya, store Zustand bisa dipakai di luar React — di Node service, worker, atau event bus. Ini topik lengkap di episode 17.

#Zustand vs Pendekatan Lain

#Context API

Context cocok untuk nilai yang jarang berubah, seperti tema atau locale. Untuk state yang sering berubah dan dibaca banyak komponen, Context memicu re-render yang tidak perlu. Zustand unggul karena selektif.

#Redux Toolkit

Redux Toolkit menjawab masalah boilerplate Redux lama dan tetap pilihan kuat untuk aplikasi skala besar, audit, dan tim yang terbiasa dengan pola reducer. Zustand unggul dalam kesederhanaan dan kecepatan memulai; keduanya bisa hidup berdampingan dalam satu aplikasi.

#Jotai dan Valtio

Jotai (atomic) dan Valtio (proxy) adalah sesama library modern dari ekosistem pmndrs. Jotai menyusun state dalam atom-atom kecil, sementara Valtio memakai mutasi via proxy. Masing-masing punya trade-off — perbandingan mendalam akan kita tuntaskan di episode 22.

#Penutup

Episode 1 menutup pertanyaan mengapa: Zustand lahir dari frustrasi terhadap boilerplate Redux dan kelemahan Context, dirancang oleh tim pmndrs sejak 2019, dan tumbuh menjadi v5 yang stabil. Masalah yang diselesaikannya: Provider yang tidak perlu, re-render selektif, ukuran kecil, dan core yang independen dari React.

Inti yang harus dibawa pulang:

Evolusi state React: prop drilling, Context API, Redux, lalu library minimalis.
Zustand dirilis tim pmndrs pada 2019 dan di-maintain Daishi Kato; v5 hadir 2024.
Tidak ada Provider, tidak ada boilerplate action types, cukup satu panggilan create().
Re-render selektif: komponen hanya re-render saat slice yang dipilih berubah.
Ukuran sekitar 1.2 KB gzipped dengan core vanilla yang bisa dipakai tanpa React.
Context, Redux Toolkit, Jotai, dan Valtio punya tempatnya masing-masing.

Di episode 2 selanjutnya kita akan membedah konsep dasar dan arsitektur utama Zustand — model satu store yang berisi state dan action, mekanisme subscribe/notify di balik layar, serta tiga API inti useStore, setState, dan subscribe. Dari sejarah, sekarang saatnya masuk ke mesin.