Zustand vs Redux Toolkit di 2026: State Manager React Mana yang Dipilih?

Zustand vs Redux Toolkit adalah keputusan manajemen state yang paling sering dihadapi tim React pada 2026, dan jawaban yang tepat bergantung pada tradeoff yang jauh melampaui sekadar ukuran bundle. Kedua library ini sama-sama mengelola global state, tetapi keduanya berangkat dari filosofi yang berlawanan: Zustand 5 mengutamakan API hook-first yang minimal dan hampir tanpa boilerplate, sementara Redux Toolkit 2.x menghadirkan struktur, DevTools time-travel, serta RTK Query untuk data fetching. Perbandingan ini mengurai proses setup, penanganan async, performa, dan sinyal yang dicari perekrut saat wawancara.

Zustand vs Redux Toolkit: perbedaan inti secara sekilas

Zustand adalah state library yang unopinionated dan dibangun di atas useSyncExternalStore milik React, menyediakan satu fungsi create yang mengembalikan sebuah hook. Redux Toolkit adalah cara resmi dan batteries-included untuk menulis Redux: ia membungkus Redux core dengan createSlice, reducer bertenaga Immer, store yang sudah dikonfigurasi, serta lapisan data-fetching opsional. Tabel di bawah merangkum posisi masing-masing.

| Kriteria | Zustand 5 | Redux Toolkit 2.x | |-----------|-----------|-------------------| | Perkiraan ukuran bundle (gzipped) | ~1 KB core | ~14 KB dengan React-Redux | | Boilerplate | Minimal, satu file per store | Slice, konfigurasi store, provider | | Kurva belajar | Landai | Sedang | | Async / data fetching bawaan | Action manual | RTK Query sudah termasuk | | DevTools | Redux DevTools via middleware | Kelas satu, time-travel | | Provider diperlukan | Tidak | Ya (<Provider>) | | Paling cocok untuk | Aplikasi kecil hingga menengah, store terfokus | Aplikasi besar, alur kompleks, tim besar |

Perbedaan utamanya terletak pada filosofi. Zustand menganggap store hanyalah sebuah hook dan tidak menghalangi jalan. Redux Toolkit menganggap sebuah aplikasi akan diuntungkan oleh struktur yang ditegakkan, satu sumber kebenaran tunggal, dan alur action-reducer yang dapat diprediksi sehingga tetap terkendali di antara puluhan kontributor.

Menyiapkan store di Zustand 5

Sebuah store Zustand hanyalah satu pemanggilan fungsi. Tidak ada provider, tidak ada action constant, dan tidak ada pernyataan switch pada reducer. State dan fungsi yang memperbaruinya hidup bersama dalam satu objek.

import { create } from 'zustand'

interface CartState {
  items: string[]
  addItem: (id: string) => void
  clear: () => void
}

// create returns a hook usable anywhere in the component tree
export const useCartStore = create<CartState>((set) => ({
  items: [],
  // set merges the returned object into current state
  addItem: (id) => set((state) => ({ items: [...state.items, id] })),
  clear: () => set({ items: [] }),
}))

Satu file itulah keseluruhan store-nya. Tidak diperlukan komponen pembungkus di root aplikasi, dan hal inilah salah satu alasan Zustand berpadu secara alami dengan React Server Components: hanya komponen daun yang mengonsumsi store yang perlu membawa "use client".

Mengonfigurasi store Redux Toolkit 2.x

Redux Toolkit memisahkan fitur yang sama ke dalam sebuah slice dan sebuah konfigurasi store. Slice mendefinisikan state beserta reducer, dan Immer memungkinkan reducer ditulis seolah-olah state bersifat mutable sambil tetap menghasilkan update yang immutable di baliknya.

import { createSlice, type PayloadAction } from '@reduxjs/toolkit'

interface CartState {
  items: string[]
}

const initialState: CartState = { items: [] }

const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    // Immer makes this "mutation" produce a safe immutable update
    addItem: (state, action: PayloadAction<string>) => {
      state.items.push(action.payload)
    },
    clear: (state) => {
      state.items = []
    },
  },
})

export const { addItem, clear } = cartSlice.actions
export default cartSlice.reducer

Store kemudian menggabungkan setiap slice reducer dan mengekspor helper bertipe untuk dipakai di seluruh aplikasi.

import { configureStore } from '@reduxjs/toolkit'
import cartReducer from './cartSlice'

export const store = configureStore({
  reducer: { cart: cartReducer },
})

// Inferred types keep selectors and dispatch fully typed
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

Redux Toolkit 2.0 juga menyertakan combineSlices untuk memuat reducer secara lazy saat runtime dan mengaktifkan auto-batch enhancer secara default, sehingga store besar tetap performan tanpa penyetelan manual.

Membaca dan memperbarui state di dalam komponen

Kedua library menyediakan pola selector, dan di sinilah ergonomika sehari-hari mulai berbeda. Zustand membaca state langsung dari hook-nya dan hanya me-render ulang sebuah komponen ketika bagian state yang dipilih berubah.

'use client'

import { useCartStore } from '@/stores/useCartStore'

export function CartBadge() {
  // Selecting a narrow value avoids unnecessary re-renders
  const count = useCartStore((state) => state.items.length)
  return <span>{count}</span>
}

Redux Toolkit mencapai hasil yang sama melalui useSelector, tetapi pohon komponen harus dibungkus dalam sebuah <Provider> di root, dan pembaruan dilakukan dengan men-dispatch action alih-alih dipanggil langsung.

'use client'

import { useSelector } from 'react-redux'
import type { RootState } from '@/store'

export function CartBadge() {
  const count = useSelector((state: RootState) => state.cart.items.length)
  return <span>{count}</span>
}

Tradeoff-nya terlihat jelas. Zustand membutuhkan lebih sedikit bagian bergerak, sementara Redux Toolkit menambahkan sebuah provider dan batas action eksplisit yang terbayar ketika banyak tim menyentuh state yang sama dan memerlukan riwayat pembaruan yang bisa ditelusuri. Untuk telaah lebih dalam mengenai bagaimana granularitas selector memengaruhi rendering, modul optimasi performa React membahas memoisasi dan pengendalian re-render secara rinci.

Data fetching async: RTK Query vs action Zustand

Data fetching adalah area di mana Redux Toolkit unggul untuk aplikasi kompleks. RTK Query, yang dibundel di dalam @reduxjs/toolkit, menghasilkan hook lengkap dengan caching, deduplikasi, dan refetch otomatis hanya dari satu definisi endpoint.

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

interface Product { id: string; name: string }

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (build) => ({
    getProducts: build.query<Product[], void>({
      query: () => 'products',
    }),
  }),
})

// The hook is generated from the endpoint name
export const { useGetProductsQuery } = api

Hook yang dihasilkan menangani loading, error, dan data ter-cache tanpa kode tambahan sama sekali, sebagaimana didokumentasikan dalam ikhtisar RTK Query. Zustand menempuh pendekatan manual: logika async berada di dalam sebuah action store, dan caching atau deduplikasi menjadi tanggung jawab developer.

import { create } from 'zustand'

interface Product { id: string; name: string }

interface ProductState {
  products: Product[]
  loading: boolean
  fetchProducts: () => Promise<void>
}

export const useProductStore = create<ProductState>((set) => ({
  products: [],
  loading: false,
  fetchProducts: async () => {
    set({ loading: true })
    const res = await fetch('/api/products')
    set({ products: await res.json(), loading: false })
  },
}))

Dalam praktiknya, sebagian besar aplikasi Zustand pada 2026 mendelegasikan server-state ke TanStack Query dan mempertahankan Zustand untuk UI state sisi klien saja. Redux Toolkit menyatukan kedua urusan ini di dalam satu store, yang lebih mudah dipahami pada codebase besar tetapi lebih berat untuk diadopsi pada codebase kecil.

Persistensi state dan hidrasi SSR di Next.js

State yang bertahan setelah halaman dimuat ulang penting untuk keranjang belanja, pilihan tema, dan token autentikasi. Zustand menangani persistensi dengan satu pembungkus middleware yang menulis ke localStorage dan merehidrasi saat mount.

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

interface ThemeState {
  theme: 'light' | 'dark'
  toggle: () => void
}

export const useThemeStore = create<ThemeState>()(
  persist(
    (set) => ({
      theme: 'light',
      toggle: () =>
        set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
    }),
    { name: 'theme-storage' }, // localStorage key
  ),
)

Redux Toolkit mencapai hasil yang sama melalui paket terpisah redux-persist atau sebuah listener kustom, yang menambah konfigurasi tetapi terintegrasi dengan timeline store yang sudah ada. Di Next.js App Router, kedua library memerlukan kehati-hatian agar terhindar dari ketidakcocokan hidrasi: state klien yang dipersistensi tidak boleh menggerakkan render server pertama. Solusi umumnya adalah membaca nilai yang dipersistensi hanya setelah mount, sehingga output server dan klien tetap identik pada render awal.

DevTools, middleware, dan kematangan ekosistem

Redux Toolkit mewarisi pengalaman Redux DevTools yang matang: debugging time-travel, replay action, dan timeline state penuh secara bawaan. Zustand terhubung ke Redux DevTools yang sama melalui middleware devtools, tetapi integrasinya lebih ringan dan tidak melacak log action formal secara default. Sistem middleware Zustand tetap mencakup kebutuhan umum, termasuk persist untuk penyimpanan lokal, immer untuk pembaruan bergaya mutable, dan subscribeWithSelector untuk langganan yang lebih presisi. Daftar middleware lengkapnya tersedia di repositori Zustand.

Bagi tim yang sudah berinvestasi pada ekosistem Redux, perkakas RTK, entity adapter, dan listener middleware mewakili pengerasan produksi selama bertahun-tahun. Untuk proyek greenfield, area permukaan Zustand yang lebih kecil berarti lebih sedikit yang harus dipelajari dan dipelihara.

Pertanyaan wawancara Redux Toolkit yang perlu diantisipasi

Manajemen state adalah topik wawancara yang sering muncul, dan wawancara Redux Toolkit biasanya menggali baik alasan maupun caranya. Pertanyaan yang umum meliputi:

• Mengapa Redux Toolkit merekomendasikan createSlice ketimbang action type dan reducer yang ditulis tangan?
• Bagaimana Immer memungkinkan reducer tampak memutasi state sambil tetap immutable?
• Masalah apa yang diselesaikan RTK Query yang tidak dapat diselesaikan oleh fetching useEffect biasa?
• Kapan sebuah proyek sebaiknya memilih Zustand ketimbang Redux Toolkit, dan apa risiko dari masing-masing pilihan?
• Apa perbedaan configureStore dengan createStore lawas, dan mengapa hal itu penting?

Kemampuan menjelaskan tradeoff, bukan sekadar sintaks, itulah yang membedakan jawaban kuat dari jawaban hafalan. Modul manajemen state Zustand menawarkan latihan terfokus pada kedua library, dan panduan pola dan optimasi React hooks tingkat lanjut menghubungkan konsep-konsep ini dengan desain komponen nyata.

State manager React mana yang sebaiknya dipilih pada 2026

Tidak ada pemenang universal, hanya kecocokan dengan proyek. Keputusannya bergantung pada skala, ukuran tim, dan seberapa banyak server-state yang harus dikelola aplikasi.

| Situasi | Pilihan yang disarankan | |-----------|--------------------| | Aplikasi kecil, sedikit developer, sebagian besar UI state | Zustand | | Aplikasi besar, banyak kontributor, alur kompleks | Redux Toolkit | | Server-state berat dengan kebutuhan caching | Redux Toolkit + RTK Query, atau Zustand + TanStack Query | | Migrasi dari Redux lawas | Redux Toolkit | | Prototipe atau proyek sampingan | Zustand | | Jejak audit ketat dan debugging time-travel | Redux Toolkit |

Zustand meraih momentum nyata pada 2026 seiring tim menjauh dari setup yang lebih berat untuk client state, sementara Redux Toolkit tetap menjadi pilihan aman untuk aplikasi besar dan berumur panjang yang diuntungkan oleh struktur yang ditegakkan. Banyak codebase produksi memakai keduanya: Zustand untuk UI state lokal dan RTK Query atau TanStack Query untuk server-state.

Kesimpulan

• Pilih Zustand untuk boilerplate minimal, aplikasi kecil hingga menengah, dan store sisi klien yang terfokus dan berpadu alami dengan Server Components
• Pilih Redux Toolkit untuk aplikasi besar, tim besar, dan alur async kompleks di mana RTK Query serta DevTools sepadan dengan overhead-nya
• Core Zustand kurang lebih 1 KB gzipped tanpa provider, sementara Redux Toolkit menambah sekitar 14 KB tetapi sudah membawa data fetching, caching, dan struktur
• Kedua library mendukung selector React 19 dan menghindari re-render yang tidak perlu selama selector tetap sempit
• Bagi tanggung jawab pada aplikasi besar: simpan UI state klien di Zustand dan delegasikan server-state ke RTK Query atau TanStack Query
• Untuk wawancara, jelaskan tradeoff di balik setiap pilihan alih-alih menghafal signature API