Lokal state tillhör en enda komponent (eller ett litet subträd) och behövs inte någon annanstans. Global state är delad mellan många, ofta långt skilda, komponenter i hela appen.
() {
[query, setQuery] = ();
;
}
Lokal state lever inuti komponenten (useState, ref, data()). Exempel: inmatningsvärden, om en dropdown är öppen, ett hover-tillstånd, en formulärs utkast. Ingen annan komponent bryr sig om det.
// the logged-in user is needed by the navbar, profile page, settings, checkout...
const user = useUserStore(s => s.user); // from a global store/context
Global state är data som många orelaterade komponenter måste läsa eller uppdatera konsistent: den autentiserade användaren, tema, shoppingvagn, app-breda notifieringar. Det lever i en Context, en store (Redux/Zustand/Pinia), eller liknande.
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("");
Att göra allt globalt lägger till boilerplate, kopplar samman komponenter, och kan skada prestandan (fler re-renders). Den bästa praktiken är hålla state så lokal som möjligt, och bara lyfta den till global när delning verkligen kräver det.
Att välja mellan lokal och global state är ett av de viktigaste state-besluten.
Att hålla state lokal gör komponenter enkla, självständiga och performanta; att gripa till global state bara när data verkligen är delad undviker onödig komplexitet.
Det vanliga anti-mönstret — att lägga allt i en global store "bara för säkerhets skull" — leder till uppsvällda, tätt kopplade appar.
Den vägledande regeln: lokalisera som standard, globalisera bara när delning kräver det.