Mi a különbség a helyi és a globális állapot között?

Question

IT Interview Practice · Accepted Answer

**Helyi állapot** egyetlen komponenséhez (vagy egy kis részfához) tartozik, és máshol nem szükséges. **Globális állapot** sok, gyakran távoli komponens között van megosztva az alkalmazás egészében.

## Helyi állapot — egyetlen komponenshez korlátozódik

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

A helyi állapot a komponensen belül él (`useState`, `ref`, `data()`). Példák: beviteli értékek, nyitott legördülő lista, hover állapot, űrlap vázlat. Egy másik komponens sem érdekli.

## Globális állapot — az alkalmazásban megosztott

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

A globális állapot olyan adatok, amelyeket sok, egymással nem kapcsolódó komponensnek konzisztensen kell olvasnia vagy frissítenie: a hitelesített felhasználó, téma, bevásárlókosár, alkalmazás szintű értesítések. Egy Context-ben, store-ban (Redux/Zustand/Pinia) vagy hasonlóban él.

## Hogyan döntsd el

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

## Gyakori hiba: túlzott globalizáció

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

Minden globálissá tétele boilerplate kódot ad, komponenseket csatol, és csökkentheti a teljesítményt (több újrarenderelés). Az ajánlott módszer az **állapot olyan lokálisan tartása, amennyire csak lehetséges**, és csak akkor emelni globális szintre, ha a megosztás valóban megkívánja.

## Miért fontos

A helyi vs. globális választás az egyik legfontosabb állapotbeli döntés.

Az állapot helyi tartása egyszerűvé, önélő és hatékony összetevőket tesz; a globális állapothoz csak akkor fordulni, ha az adatok valóban megosztottak, elkerüli a szükségtelen bonyolultságot.

A gyakori anti-pattern — mindent egy globális store-ba helyezni "csak az esetre" — duzzadt, szorosan csatolt alkalmazásokhoz vezet.

Az irányító szabály: **alapértelmezettként lokalizálj, globalizálj csak akkor, ha a megosztás megkívánja.**

Helyi állapot — egyetlen komponenshez korlátozódik

Globális állapot — az alkalmazásban megosztott

Hogyan döntsd el

Gyakori hiba: túlzott globalizáció

Miért fontos

Kapcsolódó kérdések