Koja je razlika između lokalnog i globalnog stanja?

Question

Accepted Answer

**Lokalno stanje** pripada jednoj komponenti (ili maloj podstablu) i nije potrebno drugdje. **Globalno stanje** dijeli se između mnogih, često udaljenih, komponenti tijekom cijele aplikacije.

## Lokalno stanje — ograničeno na jednu komponentu

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

Lokalno stanje živи unutar komponente (`useState`, `ref`, `data()`). Primjeri: vrijednosti unosa, je li padajući izbornik otvoren, status najebe, nacrt obrasca. Nijedna druga komponenta nije zainteresirana za to.

## Globalno stanje — djeljeno u cijeloj aplikaciji

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

Globalno stanje su podaci koje mnogе nepovezane komponente moraju čitati ili dosljedno ažurirati: autentiicirani korisnik, tema, košarica za kupnju, obavijesti na razini aplikacije. Postojи u Context-u, store-u (Redux/Zustand/Pinia), ili sličnom.

## Kako se odlučiti

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

## Česta greška: prebolje globaliziranja

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

Činiti sve globalno dodaje boilerplate, spregu komponente, i može šteti performansama (više re-rendera). Najbolja praksa je **držite stanje što je moguće lokalnije**, i to podignite na globalnost samo kada zajedničko korištenje stvarno to zahtijeva.

## Zašto je to važno

Odabir lokalnog naspram globalnog jedan je od najznačajnijih odluka o stanju.

Držanje stanja lokalnim čini komponente jednostavnim, samoispaljivim i djelotvornim; pribjegavanje globalnom stanju samo kada se podaci zaista dijele izbjegava nepotrebnu složenost.

Čest anti-pattern — sve stavljanje u globalni store "na svaki slučaj" — vodi do nadutih, čvrsto povezanih aplikacija.

Vodeće pravilo: **lokaliziraj prema zadanoj vrijednosti, globaliziraj samo kada to zahtijeva zajedničko korištenje.**