Apakah perbezaan antara keadaan lokal dan keadaan global?

Question

Accepted Answer

**Keadaan lokal** tergolong kepada satu komponen (atau pokok kecil) dan tidak diperlukan di tempat lain. **Keadaan global** dikongsi merentas banyak, sering kali jauh, komponen di seluruh aplikasi.

## Keadaan lokal — terbatas kepada satu komponen

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

Keadaan lokal hidup di dalam komponen (`useState`, `ref`, `data()`). Contoh: nilai input, sama ada dropdown terbuka, keadaan hover, draf borang. Tiada komponen lain peduli tentangnya.

## Keadaan global — dikongsi di seluruh aplikasi

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

Keadaan global ialah data yang mesti dibaca atau dikemas kini dengan konsisten oleh banyak komponen yang tidak berkaitan: pengguna yang disahkan, tema, troli beli-belah, pemberitahuan skop aplikasi. Ia hidup dalam Context, storan (Redux/Zustand/Pinia), atau serupa.

## Cara membuat keputusan

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

## Satu kesilapan biasa: over-globalizing

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

Menjadikan semua global menambahkan boilerplate, menggandingkan komponen, dan boleh merosakkan prestasi (lebih banyak re-render). Amalan terbaik adalah **simpan keadaan semestinya lokal**, dan hanya angkatnya ke global apabila perkongsian benar-benar memerlukannya.

## Mengapa ini penting

Memilih lokal berbanding global adalah salah satu keputusan keadaan yang paling berkesan.

Menyimpan keadaan tempatan membuat komponen mudah, berdikari, dan berprestasi; menggunakan keadaan global hanya apabila data benar-benar dikongsi mengelakkan kerumitan yang tidak perlu.

Anti-corak yang kerap — meletakkan semua dalam storan global "sekadar untuk berjaga-jaga" — membawa kepada aplikasi yang membengkak dan terikat ketat.

Peraturan panduan: **lokalisasikan secara lalai, globalisasikan hanya apabila perkongsian memintanya.**