Care este diferența dintre starea locală și starea globală?

Question

Accepted Answer

**Starea locală** aparține unei singure componente (sau unui mic subarbore) și nu este necesară în altă parte. **Starea globală** este împărțită între multe, adesea îndepărtate, componente în întreaga aplicație.

## Starea locală — limitată la o singură componentă

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

Starea locală trăiește în interiorul componentei (`useState`, `ref`, `data()`). Exemple: valori de intrare, dacă un dropdown este deschis, o stare de hover, o schiță a unui formular. Nicio altă componentă nu se preocupă de aceasta.

## Starea globală — împărțită la nivelul aplicației

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

Starea globală este data pe care multe componente neînrudite trebuie să o citească sau să o actualizeze consistent: utilizatorul autentificat, tema, coșul de cumpărături, notificări la nivelul aplicației. Trăiește într-un Context, un store (Redux/Zustand/Pinia) sau similar.

## Cum să decizi

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

## O greșeală comună: globalizarea excesivă

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

A face totul global adaugă boilerplate, cuplează componentele și poate afecta performanța (mai multe re-redări). Cea mai bună practică este **să ții starea cât mai locală posibil**, și doar să o ridici la nivel global când împărțirea o necesită cu adevărat.

## De ce conteaza

Alegerea dintre local și global este una dintre cele mai importante decizii privind starea.

Pastrarea stării locale ține componentele simple, auto-conținute și performante; apelarea la starea globală doar când data este cu adevărat împărțită evită complexitatea inutilă.

Anti-modelul frecvent — punerea totul într-un store global "doar în caz că" — duce la aplicații umflate și strâns cuplate.

Regula orientatoare: **localizează în mod implicit, globalizează doar când împărțirea o impune.**