• 1. React Context API (Built-in)
• 2. Zustand
• 3. Redux Toolkit
• 4. Recoil
• 5. Jotai
• Kesimpulan

Dalam pengembangan aplikasi React, pengelolaan state merupakan salah satu aspek paling penting yang memengaruhi arsitektur, performa, dan pengalaman pengguna. React sendiri menyediakan pendekatan dasar untuk state menggunakan useState dan useReducer, serta mekanisme berbagi data antar komponen dengan Context API.

Namun, ketika aplikasi tumbuh menjadi lebih kompleks—dengan banyak komponen yang saling bergantung dan interaksi data yang dinamis—mengelola state bisa menjadi tantangan tersendiri.

State management tidak hanya tentang menyimpan data, tetapi juga bagaimana cara data itu dibagikan, dimutakhirkan, dan dilacak dalam skala besar. Oleh karena itu, banyak developer React mulai menggunakan library pihak ketiga yang menawarkan solusi yang lebih terstruktur, efisien, dan mudah dirawat.

Pada pembahasan kali ini, kita akan mengulas berbagai pilihan state management terbaik di React, serta membantu kamu memilih mana yang paling sesuai dengan kebutuhan proyekmu.

1. React Context API (Built-in)

Context API adalah solusi bawaan dari React untuk membagikan data global ke seluruh komponen tanpa harus melakukan prop drilling. Ini sangat cocok untuk data yang jarang berubah seperti status autentikasi, tema, atau preferensi pengguna.

Contoh penggunaan:

// Context.js
import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

// App.js
import { useTheme } from './Context';

function ThemeToggler() {
  const { theme, setTheme } = useTheme();
  return <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle Theme</button>;
}

Kelebihan:

• Native di React, tidak butuh library tambahan
• Cocok untuk global state sederhana (user login, tema, dll)

Kekurangan:

• Tidak efisien untuk data besar atau sering berubah (bisa menyebabkan re-rendering massal)
• Boilerplate bisa bertambah saat state semakin kompleks

Kapan digunakan:

• Aplikasi kecil hingga menengah
• State global sederhana

Selengkapnya: https://react.dev/reference/react/useContext

2. Zustand

Zustand adalah state management yang ringan namun sangat powerful, dibuat oleh tim yang sama dengan Jotai. Library ini menggunakan pendekatan hooks yang sangat intuitif dan minim boilerplate.

Contoh penggunaan:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 }))
}));

function Counter() {
  const { count, increment } = useStore();
  return <button onClick={increment}>Count: {count}</button>;
}

Kelebihan:

• API sangat sederhana dan intuitif
• Menggunakan proxy state (dengan immer)
• Tidak memicu re-render global saat sebagian state berubah
• Mendukung middleware, persist, dan devtools

Kekurangan:

• Masih tergolong baru dibanding Redux

Kapan digunakan:

• Aplikasi menengah hingga besar
• Ingin state management ringan tanpa boilerplate

Selengkapnya: https://zustand-demo.pmnd.rs/

3. Redux Toolkit

Redux Toolkit adalah versi modern dari Redux yang menyederhanakan setup dan pengelolaan store dengan pattern yang lebih terstruktur. Cocok untuk aplikasi besar yang memerlukan flow data yang sangat jelas.

Contoh penggunaan:

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

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

export const { increment } = counterSlice.actions;
export default counterSlice.reducer;

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

// Counter.js
import { useDispatch, useSelector } from 'react-redux';
import { increment } from './counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();
  return <button onClick={() => dispatch(increment())}>Count: {count}</button>;
}

Kelebihan:

• Standar industri, ekosistem luas
• Redux Toolkit menyederhanakan setup
• Kompatibel dengan middleware seperti thunk, saga
• Cocok untuk data yang kompleks dan banyak interaksi

Kekurangan:

• Kurva belajar lebih tinggi
• Masih cukup verbose meskipun lebih baik dari Redux klasik

Kapan digunakan:

• Aplikasi enterprise
• Tim besar atau kolaborasi tim
• Perlu integrasi kompleks dan predictable state

Selengkapnya: https://redux-toolkit.js.org/

4. Recoil

Recoil menawarkan pendekatan atomik untuk state management yang sangat cocok untuk skenario di mana data saling bergantung satu sama lain. Library ini dikembangkan oleh Facebook dan dirancang untuk menyatu dengan React.

Contoh penggunaan:

import { atom, useRecoilState } from 'recoil';

const countState = atom({
  key: 'countState',
  default: 0,
});

function Counter() {
  const [count, setCount] = useRecoilState(countState);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

Kelebihan:

• Dekat dengan mental model React
• State atomik dan selektor mirip hooks biasa
• Cocok untuk dependency antar state

Kekurangan:

• Masih experimental (belum 1.0)
• Kurang dokumentasi lanjutan

Kapan digunakan:

• Proyek pribadi atau eksploratif
• Butuh relasi antar state dengan cara deklaratif

Selengkapnya: https://recoiljs.org/

5. Jotai

Jotai adalah library state management yang sangat minimalis dengan pendekatan atomik. Cocok untuk developer yang ingin solusi sederhana dan langsung tanpa konfigurasi tambahan.

Contoh penggunaan:

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

Kelebihan:

• Pendekatan atomik sederhana
• Tidak butuh provider wrapper
• Ukuran sangat kecil dan cepat

Kekurangan:

• Komunitas lebih kecil dari Redux atau Zustand

Kapan digunakan:

• Aplikasi ringan
• Butuh pendekatan minimalis untuk state

Selengkapnya: https://jotai.org/

Kesimpulan

Tidak ada satu solusi state management yang cocok untuk semua aplikasi React. Pemilihan tergantung pada kebutuhan dan kompleksitas proyek yang sedang dikerjakan. Jika kamu mengembangkan aplikasi kecil dengan kebutuhan state yang sederhana, maka Context API sudah sangat mencukupi.

Untuk aplikasi menengah dengan kebutuhan efisiensi dan kemudahan integrasi, Zustand atau Jotai bisa menjadi pilihan yang sangat menarik.

Namun jika kamu bekerja di lingkungan enterprise dengan banyak tim dan alur data kompleks, Redux Toolkit masih menjadi standar industri yang solid.

Sementara itu, Recoil menawarkan pendekatan baru yang deklaratif dan fleksibel, cocok untuk eksperimen atau proyek dengan arsitektur state yang saling tergantung.

Setiap solusi memiliki kelebihan dan kekurangannya masing-masing, jadi pilihlah dengan bijak sesuai dengan kebutuhan teknis dan preferensi tim dalam membangun aplikasi React yang maintainable dan scalable.