Definisi dan Strategi State Management
State management dalam React adalah teknik mengelola data yang berubah seiring waktu dan menentukan bagaimana komponen merender tampilan. Pemilihan strategi bergantung pada kompleksitas aplikasi: apakah data bersifat lokal (hanya satu komponen), global (dibutuhkan banyak komponen), atau server-side (data dari API).
Tabel Perbandingan Strategi State Management
| Metode | Kasus Penggunaan | Kelebihan | Kekurangan |
|---|---|---|---|
| useState/useReducer | State lokal/UI sederhana | Ringan, tanpa dependensi | Prop drilling jika terlalu dalam |
| Context API | Data global (tema, user) | Built-in, mudah diimplementasi | Re-render berlebih jika tidak dioptimasi |
| Zustand | State global performa tinggi | Sangat ringan, API minimalis | Memerlukan instalasi library |
| Redux Toolkit | Aplikasi skala enterprise | Ekosistem luas, debugging kuat | Boilerplate cukup banyak |
| TanStack Query | Server state/Caching API | Otomatisasi caching & loading | Kurang cocok untuk UI state |
Implementasi Dasar: useState dan useReducer
Untuk kebutuhan lokal, useState adalah standar industri. Jika logika state memiliki banyak transisi, useReducer lebih disarankan untuk menjaga keterbacaan kode.
// Contoh useReducer untuk counter
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment': return { count: state.count + 1 };
case 'decrement': return { count: state.count - 1 };
default: throw new Error();
}
}
// Penggunaan dalam komponen
const [state, dispatch] = useReducer(reducer, initialState);Mengelola Global State dengan Zustand
Zustand telah menjadi standar baru karena kesederhanaannya dibandingkan Redux. Berikut adalah cara implementasi dasar:
import { create } from 'zustand';
const useStore = create((set) => ({
bears: 0,
increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
}));
function BearCounter() {
const bears = useStore((state) => state.bears);
return <h1>{bears} around here...</h1>;
}Panduan Pemilihan Teknologi
- Gunakan useState/useReducer: Jika data hanya digunakan oleh komponen tersebut atau turunannya (prop drilling masih bisa ditoleransi).
- Gunakan Context API: Jika data jarang berubah (seperti preferensi bahasa atau tema gelap/terang).
- Gunakan TanStack Query: Jika 80% state aplikasi Anda berasal dari fetch data API. Ini akan menghilangkan kebutuhan untuk menyimpan data API di Redux/Zustand.
- Gunakan Zustand/Redux: Jika Anda memiliki state kompleks yang sering berubah dan diakses oleh banyak komponen yang berjauhan dalam pohon komponen.
Tips Troubleshooting
Masalah paling umum dalam state management adalah unnecessary re-renders. Pastikan Anda menggunakan React.memo, useMemo, atau useCallback untuk membatasi eksekusi ulang komponen saat state berubah. Jika menggunakan library eksternal, pastikan untuk melakukan seleksi state (selector) agar komponen hanya berlangganan pada bagian data yang benar-benar dibutuhkan.