State adalah data apa pun yang dapat berubah dari waktu ke waktu dan yang bergantung pada UI untuk dirender. Ketika state berubah, UI diperbarui untuk mencerminkannya. Ini adalah "memori" aplikasi Anda pada saat tertentu.
✓ A counter value, a form's input text, a toggle (on/off)
✓ Whether a modal is open, the active tab, loading/error flags
✓ The logged-in user, items in a cart, fetched API data
✓ The current theme (dark/light), selected filters
function Counter() {
const [count, setCount] = useState(0); // `count` is state
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times {/* the UI is a function of state */}
</button>
);
}
Ide inti dari framework modern: UI = f(state). Anda tidak memperbarui DOM secara manual; Anda mengubah state, dan framework merender ulang UI agar sesuai. Klik tombol → count berubah → angka yang ditampilkan diperbarui secara otomatis.
State: changes over time, drives re-renders (count, user, isOpen)
Constants: never change (PI, config URLs) — not state
Derived: computed FROM state (fullName from firstName + lastName) — don't store separately
Bukan setiap variabel adalah state — hanya data yang berubah dan mempengaruhi apa yang dirender. Nilai yang dapat Anda hitung dari state yang ada tidak boleh disimpan sebagai state terpisah (itu berisiko keluar dari sinkronisasi).
Local/UI state → belongs to one component (input text, isOpen)
Global state → shared app-wide (user, theme, cart)
Server state → data fetched from an API (cached remote data)
URL state → in the address bar (filters, page number)
Memahami state sebagai "data yang berubah dan mendorong UI" adalah fondasi dari semua pengembangan frontend.
Model mental UI = f(state) menjelaskan bagaimana React/Vue/Angular bekerja — Anda mengelola state, dan tampilan mengikutinya.
Mengenali apa yang dan apa yang bukan state (dan tidak menduplikasi nilai yang dapat diturunkan) adalah langkah pertama menuju pengelolaannya dengan baik; segalanya dalam manajemen state dibangun di atas konsep ini.