Hvad er forskellen mellem lokal og global tilstand?

Question

Accepted Answer

**Lokal tilstand** tilhører en enkelt komponent (eller et lille undertræ) og er ikke nødvendig andre steder. **Global tilstand** deles på tværs af mange, ofte fjerne, komponenter i hele appen.

## Lokal tilstand — begrænset 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 tilstand lever inden i komponenten (`useState`, `ref`, `data()`). Eksempler: inputværdier, om en dropdown er åben, et hover-tilstand, en formats udkast. Ingen anden komponent bekymrer sig om det.

## Global tilstand — delt på tværs af 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 tilstand er data, som mange urelaterede komponenter skal læse eller opdatere konsistent: den godkendte bruger, tema, indkøbskurv, app-brede notifikationer. Den lever i en Context, en store (Redux/Zustand/Pinia), eller lignende.

## Hvordan man beslutter

```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 almindelig fejl: 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("");
```

At gøre alt globalt tilføjer boilerplate, koblet komponenter sammen og kan skade ydeevnen (flere re-renders). Bedste praksis er at **holde tilstand så lokal som muligt**, og kun løfte den til global, når deling virkelig kræver det.

## Hvorfor det er vigtig

At vælge lokal vs. global er en af de mest afgørende tilstandsbeslutninger.

At holde tilstand lokal holder komponenter simple, selvstændige og performante; at henvende sig til global tilstand kun når data virkelig deles undgår unødvendig kompleksitet.

Det hyppige anti-pattern — at lægge alt i en global store "bare for at være sikker" — fører til oppustede, tæt koblede apps.

Den vejledende regel: **lokaliser som standard, globalisér kun når deling kræver det.**