Belajar Zustand - Fitur Stabil Terbaru (v5.x)

#Pendahuluan

Menjelang akhir series, kita menengok Zustand v5 sebagai versi stabil yang jadi fondasi production. Episode 20 membahas kemampuan yang datang di v5: fungsi useStore yang kompatibel dengan React 19 dan hook use, perbaikan typing middleware, serta rangkaian rilis 2026 dari v5.0.10 hingga v5.0.14 yang membawa perbaikan race condition persist dan peningkatan devtools.

Kalian juga belajar cara memverifikasi versi terbaru di registry sebelum menaikkan dependency di project.

#Kemampuan v5

#useStore dan React 19

Zustand v5 menambahkan fungsi useStore ke package utama, terpisah dari hook useStore yang dihasilkan create. Ini memungkinkan memakai store vanilla dengan hook use dari React 19 secara langsung:

useStore dengan hook use

import { use } from 'react'
import { useStore } from 'zustand'
import { counterStore } from './counter-store'
 
export function useCounterReadonly() {
  return useStore(counterStore, (s) => s.count)
}
 
export function CounterValue() {
  const count = use(useCounterReadonly())
  return <span>{count}</span>
}

use(useCounterReadonly()) menggabungkan useStore dengan hook use, mengikuti pola resource yang diperkenalkan React 19. Zustand v5 tetap mendukung cara lama — hook biasa dari create — sehingga migrasi tidak memaksa perubahan besar.

#useShallow dan createStore

v5 merapikan ekspor: useShallow kini diimport dari zustand/react/shallow, dan createStore tersedia dari zustand/vanilla. Keduanya sudah kita pakai di episode 13 dan 17:

Ekspor inti v5

import { useShallow } from 'zustand/react/shallow'
import { createStore } from 'zustand/vanilla'
import { useStore } from 'zustand'

createStore dari zustand/vanilla dan useStore dari zustand menjadi pasangan untuk membawa store vanilla ke React, sementara useShallow menyederhanakan multi-selector tanpa dependensi tambahan.

#Perbaikan Typing Middleware

Versi 4 sebelumnya sering memaksa panggilan create dengan kurung ganda saat memakai middleware. v5 memperbaiki inference tipe sehingga lebih banyak kasus bisa ditulis tanpa kurung ganda:

Typing middleware tanpa kurung ganda

import { create } from 'zustand'
import { persist } from 'zustand/middleware'
 
interface CartState {
  items: string[]
  addItem: (id: string) => void
}
 
export const useCart = create<CartState>()(
  persist(
    (set) => ({
      items: [],
      addItem: (id) => set((s) => ({ items: [...s.items, id] })),
    }),
    { name: 'cart' },
  ),
)

create<CartState>()(persist(...)) tetap menjadi bentuk yang paling aman untuk typing lengkap. Yang berubah di v5: middleware lebih jarang mengaburkan tipe state, dan komposisi middleware seperti devtools(persist(...)) menghasilkan tipe yang lebih akurat.

#Rangkaian Rilis 2026

Sepanjang Januari sampai Mei 2026, tim rilis v5.0.10 hingga v5.0.14 dengan perbaikan yang relevan untuk production:

• Fix race condition pada middleware persist saat store di-rehydrate dua kali dalam waktu bersamaan.
• Improvement devtools untuk stack trace di Firefox dan Safari serta inferensi tipe action.
• Penyempurnaan typing untuk kombinasi middleware dan utility seperti subscribeWithSelector.

Pola yang dipakai: versi patch tetap backport ke v4 bila diperlukan, sementara pengembangan fitur berjalan di v5. Selalu baca changelog di repo sebelum upgrade.

#Memverifikasi Versi Terbaru

Sebelum menaikkan dependency, cek versi terbaru di registry:

npm view zustand version

npm view zustand version menampilkan versi stable terbaru. Untuk melihat daftar rilis patch terakhir:

npm view zustand versions --json

Dengan mengecek registry sebelum upgrade, kalian tahu apakah perbaikan yang dibutuhkan sudah tersedia di versi terbaru atau masih menunggu rilis berikutnya.

#Penutup

Episode 20 merangkum Zustand v5 sebagai versi stabil: useStore untuk React 19, ekspor yang dirapikan untuk useShallow dan createStore, typing middleware yang lebih baik, serta rangkaian rilis 2026 yang memperbaiki race condition persist dan devtools.

Inti yang harus dibawa pulang:

• v5 menambahkan fungsi useStore yang kompatibel dengan hook use React 19.
• createStore dan useStore memisahkan store vanilla dari lapisan React.
• useShallow diimport dari zustand/react/shallow.
• v5 memperbaiki inference tipe middleware.
• Rilis 2026 memperbaiki race condition persist dan devtools.
• npm view zustand version memverifikasi versi stable terbaru.

Di episode 21 selanjutnya kita akan membahas production-ready architecture — struktur folder store di tim, pattern slices per feature, konvensi penamaan action, code-splitting per domain, serta integrasi linting, type-check, test coverage, dan dokumentasi untuk onboarding.