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.
() {
[query, setQuery] = ();
;
}
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.
// 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.
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
// ❌ 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.
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.