State er alle data som kan endres over tid og som brukergrensesnittet er avhengig av for å renderes. Når state endres, oppdateres brukergrensesnittet for å gjenspeile det. Det er "minnet" til applikasjonen din på et gitt tidspunkt.
✓ 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>
);
}
Kjerneideen i moderne frameworks: UI = f(state). Du oppdaterer ikke DOM-en manuelt; du endrer state, og rammeverket gjenrenderer brukergrensesnittet for å tilpasse det. Klikk på knappen → count endres → det viste tallet oppdateres automatisk.
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
Ikke hver variabel er state — bare data som endres og påvirker hva som renderes. Verdier som du kan beregne fra eksisterende state, bør ikke lagres som separat state (dette risikerer at de blir usynkronisert).
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)
Å forstå state som "data som endres og driver brukergrensesnittet" er grunnlaget for all frontend-utvikling.
Den mentale modellen UI = f(state) forklarer hvordan React/Vue/Angular fungerer — du administrerer state, og viewet følger.
Å gjenkjenne hva er og ikke er state (og ikke duplisere avledbare verdier) er det første steget mot å administrere det godt; alt innen state management bygger på dette konseptet.