Koks yra skirtumas tarp vietinės ir globalinės būsenos?

Question

Accepted Answer

**Vietinė būsena** priklauso vienam komponentui (arba mažam pomedžiui) ir nereikalinga kitur. **Globali būsena** bendrinama tarp daugelio, dažnai tolimų, komponentų visoje programoje.

## Vietinė būsena — apribota vienu komponentu

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

Vietinė būsena gyvena komponentą viduje (`useState`, `ref`, `data()`). Pavyzdžiai: įvesties vertės, ar išplečiamasis sąrašas atidarytas, žymėjimo būsena, formos juodraštis. Jokiam kitam komponentui tai nerūpi.

## Globali būsena — bendrinė visoje programoje

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

Globali būsena yra duomenys, kuriuos daug nesusijusių komponentų turi nuosekliai skaityti arba atnaujinti: autentifikuotas naudotojas, tema, pirkinių krepšelis, programos lygio pranešimai. Jis gyvena Context-e, saugykloje (Redux/Zustand/Pinia) arba panašiai.

## Kaip nuspręsti

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

## Dažna klaida: per didelis globalizavimas

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

Viski padaryti globaliu prideda šablono kodo, susieja komponentus ir gali paskgrėsti našumą (daugiau perrašymo). Geriausias būdas yra **būseną palikti kuo lokalesnę**, ir ją ikelti į globalią tik tada, kai daliji tikrai to reikalauja.

## Kodėl tai svarbu

Pasirinkimas tarp lokalinės ir globalinės būsenos yra vienas iš labiausiai reikšmingų sprendimų dėl būsenos.

Vietinės būsenos išlaikymas komponentus paprasta, savarankiška ir produktyvia; kreipimasis į globalią būseną tik tada, kai duomenys tikrai bendrinami, išvengus nereikalingos sudėtingumo.

Dažnas anti-šablonas — visą dėti į globalią saugyklą "tik jei reikės" — veda prie išpūto, tiesiogiai susieto programos.

Vadovaujanti taisyklė: **lokalizuokite pagal numatytuosius nustatymus, globalizuokite tik jei daliji to reikalauja.**