State è qualsiasi dato che può cambiare nel tempo e da cui dipende il rendering dell'UI. Quando lo state cambia, l'UI si aggiorna per riflettere il cambiamento. È la "memoria" della tua applicazione in un dato momento.
✓ A counter value, a form's input text, a toggle (on/off)
✓ Whether a modal is open, the active tab, loading/error flags
✓ The logged-in user, items in a cart, fetched API data
✓ The current theme (dark/light), selected filters
function Counter() {
const [count, setCount] = useState(0); // `count` is state
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times {/* the UI is a function of state */}
</button>
);
}
L'idea fondamentale dei framework moderni: UI = f(state). Non aggiorn manualmente il DOM; cambi lo state e il framework re-renderizza l'UI per farlo corrispondere. Clicca il bottone → count cambia → il numero visualizzato si aggiorna automaticamente.
State: changes over time, drives re-renders (count, user, isOpen)
Constants: never change (PI, config URLs) — not state
Derived: computed FROM state (fullName from firstName + lastName) — don't store separately
Non ogni variabile è state — solo i dati che cambiano e influenzano quello che viene renderizzato. I valori che puoi calcolare dallo state esistente non dovrebbero essere memorizzati come state separato (c'è il rischio che diventino incoerenti).
Local/UI state → belongs to one component (input text, isOpen)
Global state → shared app-wide (user, theme, cart)
Server state → data fetched from an API (cached remote data)
URL state → in the address bar (filters, page number)
Comprendere lo state come "dato che cambia e guida l'UI" è il fondamento di tutto lo sviluppo frontend.
Il modello mentale UI = f(state) spiega come funzionano React/Vue/Angular — gestisci lo state e la view lo segue.
Riconoscere cosa è e cosa non è state (e non duplicare valori derivabili) è il primo passo verso una buona gestione dello state; tutto nel state management si basa su questo concetto.