Lewati ke konten utama
menjadi.dev
Frontend

State

Data yang berubah seiring waktu dan menyebabkan UI di-render ulang.

State adalah data dalam aplikasi yang bisa berubah seiring waktu dan ketika berubah, UI di-render ulang untuk mencerminkan data terbaru. Dalam React, state dikelola dengan useState hook (state lokal component) atau useReducer (state kompleks). State bisa: Local State (hanya digunakan component itu — form input, toggle), Lifted State (di-share antar sibling components via parent), Global State (diakses dari mana saja — Zustand, Redux, Context API). Pentingnya immutable update: state tidak diubah langsung (state.value = 5 — jangan!), tapi diganti dengan nilai baru (setState({ …state, value: 5 })). Server State (data dari API) sebaiknya dikelola dengan library khusus seperti TanStack Query.

Contoh Kode

// React useState
const [count, setCount] = useState(0);
const [user, setUser] = useState<User | null>(null);

// Immutable update untuk object
setUser(prev => ({ ...prev, name: 'Budi' }));

// Immutable update untuk array
setItems(prev => [...prev, newItem]);
setItems(prev => prev.filter(item => item.id !== id));

Istilah Terkait