State is alle gegevens die in de loop van de tijd kunnen veranderen en waarvan de UI afhankelijk is om te renderen. Wanneer state verandert, wordt de UI bijgewerkt om dit weer te geven. Het is het "geheugen" van je applicatie op elk moment.
✓ 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>
);
}
Het kernidee van moderne frameworks: UI = f(state). Je werkt de DOM niet handmatig bij; je wijzigt state, en het framework rendert de UI opnieuw om deze aan te passen. Klik op de knop → count verandert → het weergegeven getal wordt automatisch bijgewerkt.
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
Niet elke variabele is state — alleen gegevens die veranderen en invloed hebben op wat wordt weergegeven. Waarden die je uit bestaande state kunt berekenen, mag je niet als aparte state opslaan (dit risico loopt dat ze niet meer synchroon zijn).
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)
State begrijpen als "gegevens die veranderen en de UI aansturen" is de basis van alle frontend-ontwikkeling.
Het mentale model UI = f(state) verklaart hoe React/Vue/Angular werken — je beheert state, en de view volgt automatisch.
Herkennen wat wel en niet state is (en afgeleide waarden niet dupliceren) is de eerste stap naar goed state management; alles in state management bouwt voort op dit concept.