Jaka jest różnica między stanem lokalnym a globalnym?

Question

Accepted Answer

**Stan lokalny** należy do pojedynczego komponentu (lub małego poddrzewa) i nie jest potrzebny nigdzie indziej. **Stan globalny** jest współdzielony między wiele, często oddalonych od siebie, komponentów w całej aplikacji.

## Stan lokalny — ograniczony do jednego komponentu

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

Stan lokalny żyje wewnątrz komponentu (`useState`, `ref`, `data()`). Przykłady: wartości input, czy dropdown jest otwarty, stan hover, wersja robocza formularza. Żaden inny komponent się nim nie przejmuje.

## Stan globalny — współdzielony w całej aplikacji

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

Stan globalny to dane, które wiele niepowiązanych komponentów musi czytać lub aktualizować w spójny sposób: zalogowany użytkownik, motyw, koszyk zakupów, powiadomienia aplikacji. Żyje w Context, store'u (Redux/Zustand/Pinia) lub podobnym.

## Jak zdecydować

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

## Częsty błąd: nadmierna globalizacja

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

Uczynienie wszystkiego globalnym dodaje boilerplate'u, wiąże komponenty ze sobą i może pogorszyć wydajność (więcej renderowań). Najlepszą praktyką jest **utrzymywanie stanu tak lokalnie jak to możliwe**, a tylko podnoszenie go na poziom globalny, gdy współdzielenie rzeczywiście tego wymaga.

## Dlaczego to ważne

Wybór między stanem lokalnym a globalnym to jedna z najbardziej konsekwentnych decyzji dotyczących stanu.

Utrzymywanie stanu lokalnego sprawia, że komponenty są proste, samodzielne i wydajne; sięganie po stan globalny tylko wtedy, gdy dane rzeczywiście są współdzielone, unika niepotrzebnej złożoności.

Częsty antypatern — umieszczanie wszystkiego w globalnym store'u "na wszelki wypadek" — prowadzi do zasobożernych, ściśle powiązanych aplikacji.

Zasada przewodnia: **lokalizuj domyślnie, globalizuj tylko gdy współdzielenie tego wymaga.**