Vad är state i en frontend-applikation?

Question

Accepted Answer

**State** är all data som kan **ändras över tid** och som UI:n beror på för att rendera. När state ändras uppdateras UI:n för att återspegla det. Det är applikationens "minne" vid varje given tidpunkt. ## Exempel på state ```text ✓ 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 ``` ## State driver UI:n ```jsx function Counter() { const [count, setCount] = useState(0); // `count` is state return ( ); } ``` Kärnidén för moderna ramverk: **UI = f(state)**. Du uppdaterar inte manuellt DOM:en; du ändrar state, och ramverket renderar om UI:n för att matcha. Klicka på knappen → `count` ändras → det visade numret uppdateras automatiskt. ## State vs annan data ```text 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 ``` Inte varje variabel är state — bara data som ändras *och* påverkar vad som renderas. Värden som du kan beräkna från befintligt state bör inte lagras som separat state (det riskerar att de blir ej synkroniserade). ## Kategorier av state ```text 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) ``` ## Varför det är viktigt Att förstå state som "data som ändras och driver UI:n" är grunden för all frontend-utveckling. Mentala modellen **UI = f(state)** förklarar hur React/Vue/Angular fungerar — du hanterar state, och vyn följer efter. Att känna igen vad som *är* och *inte är* state (och inte duplicera härledda värden) är det första steget mot att hantera det väl; allt inom state management bygger på detta koncept.