Mikä on ero paikallisen ja globaalin tilan välillä?

Question

Accepted Answer

**Paikallinen tila** kuuluu yhdelle komponentille (tai pienelle alipuulle) eikä sitä tarvita muualla. **Globaali tila** jaetaan useiden, usein etäisten komponenttien kesken koko sovelluksessa.

## Paikallinen tila — rajattu yhteen komponenttiin

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

Paikallinen tila elää komponentin sisällä (`useState`, `ref`, `data()`). Esimerkkejä: syötteen arvot, onko pudotusvalikko auki, hover-tila, lomakkeen luonnos. Mikään muu komponentti ei välitä siitä.

## Globaali tila — jaettu koko sovellukseen

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

Globaalilla tilalla tarkoitetaan tietoa, jota monet liittymättömät komponentit voivat lukea tai päivittää johdonmukaisesti: todentama käyttäjä, teema, ostoskori, koko sovelluksen ilmoitukset. Se sijaitsee Context-objektissa, kaupassa (Redux/Zustand/Pinia) tai vastaavassa.

## Kuinka päättää

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

## Yleinen virhe: liika globalisointi

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

Kaiken tekeminen globaaliksi lisää boilerplate-koodia, kytkee komponentit toisiinsa ja voi vahingoittaa suorituskykyä (enemmän uudelleenpiirtoja). Paras käytäntö on **pitää tila mahdollisimman paikallisena** ja turvautua globaaliin tilaan vain silloin, kun tietojen jakaminen sitä todella vaatii.

## Miksi se on tärkeää

Paikallis- ja globaalitilan valinta on yksi tärkeimmistä tilaan liittyvistä päätöksistä.

Paikallisen tilan säilyttäminen pitää komponentit yksinkertaisina, itsenäisinä ja tehokkaaina; globaaliin tilaan turvautuminen vain silloin, kun tiedot jaetaan todella, välttää tarpeettoman monimutkaisuuden.

Yleinen anti-kuvio — kaiken laittaminen globaaliin kauppaan "varmuuden vuoksi" — johtaa paisuneisiin, tiiviisti kytkettyihin sovelluksiin.

Ohjaava sääntö: **lokalisoi oletuksena, globalisoi vain kun jakaminen sitä vaatii.**