Lokale state behoort tot een enkel component (of een klein subtree) en is niet elders nodig. Globale state wordt gedeeld tussen veel, vaak verre, componenten in de app.
() {
[query, setQuery] = ();
;
}
Lokale state leeft in het component (useState, ref, data()). Voorbeelden: invoerwaarden, of een dropdown open is, een hover-state, een concept van een formulier. Geen ander component hoeft er iets van af te weten.
// the logged-in user is needed by the navbar, profile page, settings, checkout...
const user = useUserStore(s => s.user); // from a global store/context
Globale state is data die veel onafhankelijke componenten moeten lezen of consistent moeten updaten: de geverifieerde gebruiker, theme, winkelwagen, app-brede notificaties. Het leeft in een Context, een store (Redux/Zustand/Pinia), of soortgelijk.
Ask: "How many components need this, and how far apart are they?"
One component (or parent+child) → LOCAL state
Many unrelated components / whole app → GLOBAL state
// ❌ putting a single form's input in global state — unnecessary complexity
globalStore.setFormInput(value);
// ✅ keep it local — only this form uses it
const [value, setValue] = useState("");
Alles globaal maken voegt boilerplate toe, koppelt componenten, en kan performance schaden (meer re-renders). De best practice is state zo lokaal mogelijk houden, en deze alleen naar globaal tillen als delen dit echt vereist.
Kiezen tussen lokaal en globaal is één van de meest impactvolle state-beslissingen.
State lokaal houden houdt componenten eenvoudig, zelfstandig en performant; alleen naar globale state grijpen wanneer data echt wordt gedeeld voorkomt onnodige complexiteit.
Het frequente anti-patroon — alles in een globale store zetten "voor het geval dat" — leidt tot opgezwollen, strak gekoppelde apps.
De richtlijn: lokaliseer standaard, globaliseer alleen wanneer delen het vereist.