State lokal milik satu komponen (atau subpohon kecil) dan tidak diperlukan di tempat lain. State global dibagikan antar banyak komponen, seringkali yang jauh, di seluruh aplikasi.
() {
[query, setQuery] = ();
;
}
State lokal berada di dalam komponen (useState, ref, data()). Contoh: nilai input, apakah dropdown terbuka, status hover, draft formulir. Tidak ada komponen lain yang peduli.
// 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 adalah data yang harus dibaca atau diperbarui secara konsisten oleh banyak komponen yang tidak terkait: pengguna terautentikasi, tema, keranjang belanja, notifikasi skala aplikasi. Ia tinggal di Context, store (Redux/Zustand/Pinia), atau sejenisnya.
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("");
Membuat semuanya global menambah boilerplate, mengkapling komponen, dan dapat merusak kinerja (lebih banyak re-render). Praktik terbaik adalah jaga state selokal mungkin, dan hanya naikkan ke global ketika berbagi benar-benar membutuhkannya.
Memilih lokal vs global adalah salah satu keputusan state paling konsekuensial.
Menjaga state lokal membuat komponen sederhana, terkandung diri sendiri, dan efisien; hanya mengandalkan state global saat data benar-benar dibagikan menghindari kompleksitas yang tidak perlu.
Anti-pola yang sering — menempatkan semuanya di store global "sekadar untuk berjaga-jaga" — menyebabkan aplikasi yang membengkak dan terikat ketat.
Aturan panduan: lokalisasi secara default, globalisasi hanya ketika berbagi menuntutnya.