Kalau kamu pernah bikin aplikasi pakai React, pasti sudah kenal istilah state. State itu ibarat “memori” komponen, yang menyimpan data tentang bagaimana UI harus tampil. Tapi, masalahnya, kalau aplikasi mulai besar dan banyak komponen, state bisa jadi ribet kalau nggak dikelola dengan benar. Nah, di sinilah state management berperan. Artikel ini bakal ngebahas state management di React dari nol, strategi yang umum dipakai, plus contoh kode yang gampang diikuti.

Secara sederhana, state itu data yang dimiliki komponen. Kalau state berubah, React otomatis nge-render ulang bagian yang terkait.
Contoh gampang:
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Tambah</button>
</div>
);
}
Di atas, count itu state lokal. Setiap kali tombol diklik, UI langsung update otomatis.
Local state itu state yang cuma dipakai di satu komponen. Paling sering pakai useState atau useReducer. Cocok buat:
Toggle modal
Input form
Status loading atau error
Kalau state mulai kompleks, bisa pakai useReducer:
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:
return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: "increment" })}>Tambah</button>
<button onClick={() => dispatch({ type: "decrement" })}>Kurang</button>
</div>
);
}
Kadang beberapa komponen butuh data yang sama. Solusinya, angkat state ke parent.
function Parent() {
const [value, setValue] = useState("");
return <Child value={value} setValue={setValue} />;
}
Dengan begini, data tetap konsisten di seluruh child component.
Kalau data harus diakses banyak komponen, baru deh pakai global state. Beberapa opsi:
Context API → built-in React, gampang buat aplikasi kecil/menengah
Redux → cocok buat aplikasi besar
Zustand / Recoil / Jotai → modern, ringan, lebih simpel daripada Redux
Contoh sederhana pakai Context API:
import React, { createContext, useContext, useState } from "react";
const ThemeContext = createContext();
function ThemeProvider({ children }) {
const [theme, setTheme] = useState("light");
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
}
function Button() {
const { theme, setTheme } = useContext(ThemeContext);
return (
<button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
Toggle Theme
</button>
);
}
Server state adalah data dari backend, misal lewat API. Kadang tricky karena harus di-handle loading, error, dan cache.
Library yang populer:
React Query
SWR
Contoh pakai React Query:
import { useQuery } from "@tanstack/react-query";
function Users() {
const { data, error, isLoading } = useQuery(["users"], fetchUsers);
if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error!</p>;
return (
<ul>
{data.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
Kadang data disimpan di URL, misal filter atau pagination. Bisa pakai React Router:
import { useSearchParams } from "react-router-dom";
function Filter() {
const [searchParams, setSearchParams] = useSearchParams();
const filter = searchParams.get("filter") || "all";
return (
<button onClick={() => setSearchParams({ filter: "active" })}>
Set Filter Active
</button>
);
}
Pakailah state lokal dulu sebelum memutuskan pakai global state.
Jangan pakai global state untuk semua data. Gunakan hanya untuk data yang dibutuhkan banyak komponen.
Pisahkan state berdasarkan domain. Misal: user, product, cart, dll.
Gunakan React Query / SWR untuk data dari API. Lebih gampang nge-handle loading, error, dan cache.
Gunakan DevTools untuk debug:
Redux DevTools buat Redux
React DevTools buat state lokal dan props
State management di React itu penting banget. Pilih strategi yang sesuai dengan kebutuhan aplikasi:
Small apps → useState / useReducer
Medium apps → Context API atau library ringan
Large apps → Redux atau Recoil/Zustand
Dengan pengelolaan state yang tepat, aplikasi React kamu bakal lebih stabil, mudah dikembangkan, dan scalable.