Stanje je bilo koji podatak koji se može promijeniti tijekom vremena i na koji UI ovisi za prikaz. Kada se stanje promijeni, UI se ažurira kako bi to odrazilo. To je "memorija" vaše aplikacije u bilo kojem trenutku.
✓ 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>
);
}
Jezgra ideja suvremenih okvira: UI = f(state). Ne ažurirate DOM ručno; mijenjate stanje, a okvir ponovno prikazuje UI kako bi se usklađio. Kliknite gumb → count se promijeni → prikazani broj se automatski ažurira.
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
Ne svaka varijabla je stanje — samo podaci koji se mijenjaju i utječu na ono što se prikazuje. Vrijednosti koje možete izračunati iz postojećeg stanja ne trebaju se pohraniti kao zasebno stanje (postoji rizik da će biti izvan sinhronizacije).
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)
Razumijevanje stanja kao "podataka koji se mijenja i upravlja UI-jem" temelj je sveog frontend razvoja.
Mentalni model UI = f(state) objašnjava kako funkcioniraju React/Vue/Angular — upravljate stanjem, a prikaz slijedi.
Prepoznavanje što je a što nije stanje (i ne dupliciranje izvedenih vrijednosti) prvi je korak prema dobrom upravljanju njime; sve u upravljanju stanjem gradi se na ovom konceptu.