Belajar Zustand - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar Zustand! Series ini akan membawa kalian menguasai Zustand — state management modern untuk React yang berukuran kecil, tanpa boilerplate, dan dipakai ribuan project di seluruh dunia — dari konsep store paling dasar hingga arsitektur production-grade. Total ada 23 episode yang tersusun dalam enam fase: pre-requisites, core concepts, middleware, advanced integration, scaling, dan production readiness.

Sebelum menyentuh zustand, ada beberapa skill dasar dan perangkat lunak yang wajib kalian miliki. Mengapa prasyarat ini penting? Karena Zustand berdiri di atas mental model React: hooks, re-render, dan component lifecycle. Tanpa fondasi tersebut, konsep selector, subscription, dan transient updates akan terasa seperti kotak hitam.

Episode 0 ini adalah peta jalan kalian: kita akan memastikan skill dasar, menyiapkan project Vite, menginstall Zustand, dan melakukan verifikasi pertama. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dikuasai

#JavaScript Modern (ES6+)

Zustand adalah library JavaScript/TypeScript, jadi kalian wajib nyaman dengan sintaks modern: destructuring, arrow functions, async/await, dan template literals. Ini contoh pola yang akan terus dipakai:

Pola ES6+ yang wajib dikuasai

const { count, increment } = useStore()
const doubled = count * 2
const pesan = `Total: ${count}`
 
const ambilData = async () => {
  const res = await fetch('/api/user')
  return res.json()
}

Destructuring seperti const { count, increment } = useStore() adalah pola yang paling sering muncul di seluruh series. Kalau destructuring, arrow function, dan async/await belum lancar, sempatkan latihan terlebih dahulu.

#React Hooks dan Masalah Context

React hooks yang wajib dikuasai: useState untuk local state, useEffect untuk side effect, dan useContext untuk membagikan nilai antar komponen. Penting juga memahami masalah re-render Context: ketika nilai context berubah, semua komponen pemakai useContext ikut re-render, termasuk yang tidak membaca nilai yang berubah.

useState dan useContext

const [count, setCount] = useState(0)
const { theme } = useContext(ThemeContext)

Pemahaman tentang kelemahan Context ini akan menjadi motivasi kenapa Zustand ada — detailnya dibahas di episode 1. useState(0) dan useContext(ThemeContext) adalah dasar yang akan kalian bandingkan dengan API Zustand nanti.

#Local State vs Global State vs Server State

Sebelum memilih alat state management, kalian harus bisa mengklasifikasi state:

• Local state: hanya dipakai satu komponen, misal nilai input form.
• Global state: dipakai banyak komponen, misal user login, theme, dan cart.
• Server state: data dari API, misal daftar post, yang butuh cache dan invalidation.

Zustand paling cocok untuk global state client-side. Server state sebaiknya di-handle TanStack Query atau SWR — perbandingan lengkapnya di episode 12.

#Perangkat Lunak dan Tools

#Node.js dan Package Manager

Pastikan Node.js versi 18 atau lebih baru terinstall di sistem kalian. Kalian boleh memakai npm atau bun — keduanya didukung penuh oleh project ini.

node -v
npm --version

Output node -v harus menampilkan versi 18.0.0 atau lebih tinggi. npm --version menampilkan versi npm, dan kalian bisa mengganti npm dengan bun jika memilihnya. Kedua package manager ini akan dipakai bergantian di sepanjang series.

#Editor dan Browser DevTools

Gunakan editor dengan dukungan TypeScript penuh — VS Code adalah pilihan paling umum. Jangan lupa dua extension penting di browser: React DevTools untuk inspeksi komponen dan Redux DevTools untuk debugging Zustand (diaktifkan lewat middleware devtools di episode 10).

#Setup Project Vite

#Membuat Project Baru

Vite adalah cara tercepat memulai project React untuk belajar. Buka terminal dan jalankan:

npm create vite@latest belajar-zustand -- --template react-ts
cd belajar-zustand
npm install

Template react-ts dipilih karena seluruh series memakai TypeScript. Setelah npm install selesai, project kalian siap dipasangi Zustand. Jika kalian sudah punya project Next.js, langkah instalasinya identik.

#Menginstall Zustand

Dengan project siap, install library utamanya:

npm i zustand

Versi yang terinstall adalah v5.x — saat penulisan series ini versi stabil terbaru adalah 5.0.14 (Mei 2026). Kalau memakai bun, perintahnya bun add zustand. Tidak ada dependensi peer tambahan selain React, sehingga instalasi sangat ringan.

#Verifikasi Instalasi

Buat folder src/stores/ lalu tulis store counter pertama:

Store counter pertama

import { create } from 'zustand'
 
export const useCounter = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}))

Di komponen App.jsx, panggil store tersebut:

Memakai store di komponen

import { useCounter } from './stores/counter'
 
export default function App() {
  const count = useCounter((s) => s.count)
  const increment = useCounter((s) => s.increment)
 
  return <button onClick={increment}>Klik: {count}</button>
}

useCounter((s) => s.count) adalah pemakaian selector — komponen hanya membaca slice yang dibutuhkan. Jika tombol menampilkan angka yang bertambah setiap diklik, instalasi kalian sukses dan environment siap digunakan.

#Ringkasan Prasyarat

Rangkuman yang sudah kalian siapkan di episode 0:

• JavaScript modern: destructuring, arrow function, async/await.
• React hooks: useState, useEffect, useContext, dan kelemahan Context.
• Klasifikasi state: local, global, dan server state.
• Node.js 18+ dengan npm atau bun sebagai package manager.
• Project Vite bertemplate react-ts dengan zustand v5.0.14 terinstall.
• React DevTools dan Redux DevTools terpasang di browser.

Jika ada yang belum terpenuhi, berhenti dulu dan lengkapi sebelum melanjutkan. Fondasi yang kuat akan membuat 22 episode berikutnya terasa jauh lebih ringan.

#Penutup

Di episode 0 ini kalian sudah menyiapkan pijakan untuk seluruh series: menguasai skill dasar JavaScript dan React, memahami klasifikasi state, menyiapkan project Vite, menginstall Zustand v5, dan memverifikasi store pertama yang berjalan.

Inti yang harus dibawa pulang:

• Zustand berdiri di atas React, jadi kuasai hooks dan JavaScript modern.
• Bedakan local state, global state, dan server state sebelum memilih tools.
• Node.js minimal versi 18 dan editor dengan dukungan TypeScript adalah prasyarat mutlak.
• Zustand diinstall dengan npm i zustand atau bun add zustand.
• Verifikasi pertama: buat store counter dan panggil via selector di komponen.
• Zustand tidak memerlukan Provider, jadi React DevTools tidak akan menampilkannya.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa membutuhkan Zustand — dari evolusi prop drilling menuju Context dan Redux yang ber-boilerplate, kelahiran Zustand oleh tim pmndrs, hingga masalah-masalah yang diselesaikannya. Pastikan environment kalian sudah siap, karena perjalanan Belajar Zustand baru saja dimulai!