Hva er forskjellen mellom lokal og global state?

Question

Accepted Answer

**Lokal state** tilhører en enkelt komponent (eller et lite undertre) og er ikke nødvendig andre steder. **Global state** deles på tvers av mange, ofte fjerne, komponenter gjennom hele appen.

## Lokal state — begrenset til én komponent

```jsx
function SearchBox() {
  const [query, setQuery] = useState(""); // only THIS component needs `query`
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}
```

Lokal state lever inne i komponenten (`useState`, `ref`, `data()`). Eksempler: inputverdier, hvorvidt en rullegardin er åpen, en hover-tilstand, et skjemas utkast. Ingen andre komponenter bryr seg om det.

## Global state — delt på tvers av appen

```jsx
// 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 er data som mange urelaterte komponenter må lese eller oppdatere konsistent: den autentiserte brukeren, tema, handlekurv, app-brede meldinger. Det lever i en Context, en store (Redux/Zustand/Pinia), eller lignende.

## Hvordan bestemme

```text
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
```

## En vanlig feil: over-globalisering

```jsx
// ❌ 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("");
```

Å gjøre alt globalt legger til boilerplate, koblet komponenter sammen, og kan skade ytelse (flere re-renders). Best practice er **holde state så lokal som mulig**, og løfte den til global bare når deling virkelig krever det.

## Hvorfor det betyr noe

Å velge lokal kontra global er en av de mest konsekvensielle state-avgjørelsene.

Å holde state lokal holder komponenter enkle, selvstendige og ytelseseffektive; å gripe til global state bare når data virkelig deles, unngår unødvendig kompleksitet.

Det hyppige anti-mønsteret — å putte alt i en global store "bare i tilfelle" — fører til oppblåste, tett koblede apper.

Den veiledende regelen: **lokalisér som standard, globaliser bare når deling krever det.**