Welcher ist der Unterschied zwischen lokalem und globalem State?

Question

Accepted Answer

**Lokaler State** gehört zu einer einzelnen Komponente (oder einem kleinen Unterbaum) und wird nicht anderswo benötigt. **Globaler State** wird über viele, oft entfernte, Komponenten in der gesamten App hinweg geteilt.

## Lokaler State — auf eine Komponente beschränkt

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

Lokaler State lebt innerhalb der Komponente (`useState`, `ref`, `data()`). Beispiele: Eingabewerte, ob ein Dropdown offen ist, ein Hover-Zustand, ein Formular-Entwurf. Keine andere Komponente kümmert sich darum.

## Globaler State — app-weit geteilt

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

Globaler State sind Daten, die viele nicht verwandte Komponenten konsistent lesen oder aktualisieren müssen: der authentifizierte Benutzer, Theme, Einkaufswagen, app-weite Benachrichtigungen. Er lebt in einem Context, einem Store (Redux/Zustand/Pinia) oder ähnlichem.

## Wie man entscheidet

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

## Ein häufiger Fehler: Übermäßige Globalisierung

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

Alles global zu machen, fügt Boilerplate hinzu, koppelt Komponenten und kann die Leistung beeinträchtigen (mehr Re-Renders). Die beste Praxis ist es, **State so lokal wie möglich zu halten**, und nur zu globalem State zu greifen, wenn die gemeinsame Nutzung es wirklich erfordert.

## Warum es wichtig ist

Die Wahl zwischen lokal und global ist eine der folgenreichsten State-Entscheidungen.

State lokal zu halten, hält Komponenten einfach, in sich geschlossen und leistungsfähig; nur bei wirklich gemeinsamen Daten zu globalem State zu greifen, vermeidet unnötige Komplexität.

Das häufige Anti-Pattern — alles in einen globalen Store zu packen „nur für den Fall