State lokal darbé siji komponèn (utawa pohon cilik) lan ora dibutuhake ing papan liya. State global dibagi dening akeh komponèn, asring adoh, ing saindhenging app.
State lokal — dibatesi marang siji komponèn
() {
[query, setQuery] = ();
;
}
State lokal darbé siji komponèn (utawa pohon cilik) lan ora dibutuhake ing papan liya. State global dibagi dening akeh komponèn, asring adoh, ing saindhenging app.
() {
[query, setQuery] = ();
;
}
State lokal manggon ing salebeting komponèn (useState, ref, data()). Contone: nilai input, apa dropdown dibuka, state hover, rancang form. Ora ana komponèn liya sing ngapel babagan iku.
// the logged-in user is needed by the navbar, profile page, settings, checkout...
const user = useUserStore(s => s.user); // from a global store/context
State global iku data sing akeh komponèn ora ana gandhengane kudu maca utawa nganyari kanthi konsisten: user sing wis auth, tema, cart, notifikasi app-lebar. Manggon ing Context, store (Redux/Zustand/Pinia), utawa sepisanan.
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("");
Gawe kabèh global nambah boilerplate, gumugat komponèn, lan bisa ngrusak performance (luwih akeh re-render). Praktik paling apik iku **jaga state cikak-cikak lokal, lan gawe global mung yen pembagiane temenan butuh.
Milih lokal versus global iku salah satunin mutusake state sing paling bisa duweni akibat.
Jaga state lokal gawe komponèn simpel, mandiri, lan cepet; nggunekaké state global mung yen data bener-bener dibagi ngindhari keruwetan sing ora perlu.
Pola anti-pattern sing asring ditandur — nglebokake kabèh ing global store "mung menang" — nyebabake app sing bengak lan raket-raket.
Aturan panuntun: lokalisir kanthi standar, globalisir mung yen pembagiane njaluk.