State ialah sebarang data yang boleh berubah dari masa ke masa dan yang menjadi sandaran UI untuk dipaparkan. Apabila state berubah, UI dikemas kini untuk mencerminkannya. Ia ialah "ingatan" aplikasi anda pada bila-bila masa.
✓ 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>
);
}
Idea teras rangka kerja moden: UI = f(state). Anda tidak mengemas kini DOM secara manual; anda menukar state, dan rangka kerja akan render semula UI supaya sepadan. Klik butang → count berubah → nombor yang dipaparkan dikemas kini secara automatik.
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 pembolehubah ialah state — hanya data yang berubah dan mempengaruhi apa yang dipaparkan. Nilai yang boleh anda kira daripada state sedia ada tidak sepatutnya disimpan sebagai state berasingan (ini berisiko menyebabkannya menjadi tidak segerak).
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 memacu UI" ialah asas kepada semua pembangunan frontend.
Model mental UI = f(state) menjelaskan cara React/Vue/Angular berfungsi — anda menguruskan state, dan paparan akan mengikut.
Mengenali apa yang merupakan dan bukan state (serta tidak menduplikasi nilai yang boleh diterbitkan) ialah langkah pertama ke arah menguruskannya dengan baik; segala-galanya dalam pengurusan state dibina atas konsep ini.