Zustand: Manajemen State React Ringan yang Menggeser Dominasi Redux

Dilansir dari npm-stat, sejak 2024, Zustand berhasil menggeser Redux menjadi library pengelola state yang paling populer digunakan di kalangan pengembang web yang menggunakan React. Lalu apa saja faktor-faktor yang membuat para pengembang beralih ke Zustand?

Zustand

Zustand adalah library pengelola state React berbasis hook yang ringan dan cepat. Library pengelola state sendiri biasanya digunakan untuk membantu mengelola data-data di aplikasi supaya data-data ini konsisten ketika digunakan di berbagai bagian aplikasi. Perubahan data yang ada dapat tersinkronisasi dengan lebih mudah jika ada pengelola state. Lalu apa saja yang Zustand tawarkan dibandingkan library lain seperti Redux?

1. 📦 Ukuran bundle

Dari ukuran bundlenya sendiri, Zustand hanya memerlukan ruang 0.6KB dibandingkan 13.6KB untuk Redux. Dengan ukuran bundle yang kecil, waktu pemuatan website bisa lebih cepat. Hal ini akan sangat membantu khususnya untuk pengguna-pengguna dari daerah yang internetnya lambat dan tidak memiliki perangkat dengan performa tinggi.

2. 🫴 Tidak perlu penyedia context

Untuk menggunakan Redux, kita perlu membungkus aplikasi React dengan penyedia context atau seperti ini:

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);

Di sisi lain, pengguna Zustand tidak perlu membungkus lagi aplikasi dengan penyedia context. Karena tidak menggunakan context, Zustand juga dapat membuat aplikasi berjalan lebih cepat ketika ada perubahan pada data di satu komponen. Hal ini dikarenakan hanya komponen yang memiliki perubahan data saja yang akan dirender ulang (disegarkan tampilannya) dan bukan seluruh aplikasi.

3. 🏛️ Arsitektur yang lebih sederhana

Ketika memakai Redux, kita perlu membuat store atau wadah yang berisi state, action, serta reducer. State merupakan data atau kondisi aplikasi saat ini. Action adalah tindakan yang diambil. Reducer digunakan untuk memetakan bagaimana state akan berubah berdasarkan state saat ini setelah mengambil suatu tindakan.

// store.js
import { configureStore, createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
  },
});

export const { increment, decrement } = counterSlice.actions;

export const store = configureStore({
  reducer: { counter: counterSlice.reducer },
});

Dalam Zustand, kode store-nya bisa dibuat jauh lebih singkat. Kita hanya perlu membuat state awal, dalam hal ini nilai, dan action atau tindakan-tindakan yang kita inginkan saja untuk mengubah state-nya.

// store.js
import { create } from 'zustand';

export const useCounterStore = create((set) => ({
  nilai: 0,
  tambah: () => set((state) => ({ nilai: state.nilai + 1 })),
  kurang: () => set((state) => ({ nilai: state.nilai - 1 }),
  aturUlang: () => set((state) => ({ nilai: 0 }))
}));

Cara Memakai Zustand

Jika belum ada project React, kalian bisa membuat project baru dengan menuliskan perintah npm init vite@latest -- --template react di terminal.
Di dalam proyek React yang sudah dibuat, pasang Zustand terlebih dahulu dengan perintah npm install zustand di terminal. Kemudian:

1. Buat file store.js

// src/store.js
// Import create dari library zustand untuk membuat store
import { create } from 'zustand'

// Gunakan metode create untuk membuat hook
export const useCounterStore = create((set) => ({
  nilai: 0, // atur state awal menjadi 0
  tambah: () => set((state) => ({ nilai: state.nilai + 1 })), // buat action tambah untuk menambah 1 poin nilai
  kurang: () => set((state) => ({ nilai: state.nilai - 1 })), // buat action kurang untuk mengurangi 1 poin nilai
  aturUlang: () => set((state) => ({ nilai: 0 })) // buat action aturUlang untuk mengatur ulang nilai menjadi 0
}));

1. Gunakan hook dari store di komponen

// src/App.jsx
import { useCounterStore } from './store'

export default function App() {
    <div style={{ "display": "flex", "width": "100vw", "alignItems": "center", "flexDirection": "column", "gap": "4px" }}>
      <h1>Nilai: {nilai}</h1>
      <button onClick={tambah}>Tambah</button>
      <button onClick={kurang}>Kurang</button>
      <button onClick={aturUlang}>Reset</button>
    </div>
}

Hasilnya akan seperti ini:

Bagaimana, mudah bukan? Kalau ada pertanyaan, silakan tanyakan di kolom komentar. Untuk fitur-fitur lain dari Zustand, kalian bisa lihat di dokumentasi mereka.

Teruslah berkarya...