X'inhu d-differenza bejn l-istat lokali u l-istat globali?

Question

Accepted Answer

**L-istat lokali** jappartjeni għal komponent wieħed (jew sottqasam żgħir) u mhux meħtieġ x'imkien ieħor. **L-istat globali** huwa mifrux fuq ħafna, ħafna drabi komponents imbiegħda, madwar l-app kollha.

## L-istat lokali — limitat għal komponent wieħed

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

L-istat lokali jgħix ġewwa l-komponent (`useState`, `ref`, `data()`). Eżempji: valuri ta' input, jekk dropdown huwa miftuħ, stat ta' hover, abbozz tal-formola. L-ebda komponent ieħor ma jimpurtah.

## L-istat globali — mifrux fuq l-app kollha

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

L-istat globali huwa data li ħafna komponents mhux relatati jridu jaqraw jew jaġġornaw b'konsistenza: l-utent awtentikat, tema, shopping cart, notifiki fuq skala ta' app. Jgħix f'Context, store (Redux/Zustand/Pinia), jew simili.

## Kif tagħti deċiżjoni

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

## Żbalja komuni: 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("");
```

Agħmel l-kollu globali iżżid boilerplate, ikkoppja komponents, u jista' jidhol il-performance (aktar re-renders). Il-prattika l-aħjar hija **iħalli l-istat lokali kemm jista' jkun**, u rqajha għal globali biss meta l-qsim verament jeħtieġha.

## Għaliex hija importanti

Il-għażla bejn lokali u globali hija waħda mid-deċiżjonijiet tal-istat l-aktar importanti.

Iħalli l-istat lokali iġumm komponents sempliċi, independenti, u effiċjenti; laħħaq għal istat globali biss meta d-data verament mifrux tevita kumplessità mhux meħtieġa.

L-anti-pattern ta' spiss — iddaħħal l-kollu f'global store "biex tkun sigura" — twassal għal apps mgħaxxa u tight-coupled.

Ir-regola gwida: **illokjalizza bil-default, igglobalizza biss meta l-qsim jeħtiegħa.**