Qual è la differenza tra lo stato locale e lo stato globale?

Question

Accepted Answer

**Lo stato locale** appartiene a un singolo componente (o a un piccolo sottoramo) e non è necessario altrove. **Lo stato globale** è condiviso tra molti componenti, spesso distanti, in tutta l'app.

## Stato locale — limitato a un componente

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

Lo stato locale vive dentro il componente (`useState`, `ref`, `data()`). Esempi: valori di input, se un dropdown è aperto, uno stato di hover, una bozza di form. Nessun altro componente se ne preoccupa.

## Stato globale — condiviso in tutta l'app

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

Lo stato globale è un dato che molti componenti non correlati devono leggere o aggiornare in modo coerente: l'utente autenticato, il tema, il carrello della spesa, le notifiche a livello di app. Vive in un Context, uno store (Redux/Zustand/Pinia) o simile.

## Come decidere

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

## Un errore comune: globalizzare eccessivamente

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

Rendere tutto globale aggiunge boilerplate, accoppia i componenti e può danneggiare le prestazioni (più re-render). La best practice è **mantenere lo stato il più locale possibile**, e sollevarlo a globale solo quando la condivisione lo richiede davvero.

## Perché è importante

Scegliere tra locale e globale è una delle decisioni di stato più consequenziali.

Mantenere lo stato locale tiene i componenti semplici, autonomi e performanti; ricorrere allo stato globale solo quando i dati sono veramente condivisi evita complessità inutile.

L'anti-pattern frequente — mettere tutto in uno store globale "nel caso" — porta a app gonfie e strettamente accoppiate.

La regola guida: **localizza per impostazione predefinita, globalizza solo quando la condivisione lo richiede.**