State este orice date care se pot schimba în timp și de care UI depinde pentru a se reda. Când state se schimbă, UI-ul se actualizează pentru a o reflecta. Este "memoria" aplicației tale la orice moment dat.
✓ 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>
);
}
Ideea de bază a framework-urilor moderne: UI = f(state). Nu actualizezi manual DOM-ul; schimbi state și framework-ul re-randează UI pentru a se potrivi. Dă clic pe buton → count se schimbă → numărul afișat se actualizează automat.
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
Nu orice variabilă este state — doar date care se schimbă și afectează ceea ce se randează. Valorile pe care le poți calcula din state-ul existent nu ar trebui să fie stocate ca state separat (aceasta riscă să se desincronizeze).
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)
Înțelegerea state ca "date care se schimbă și acționează UI-ul" este fundamentul întregii dezvoltări frontend.
Modelul mental UI = f(state) explică cum funcționează React/Vue/Angular — gestionezi state și viziunea urmează.
Recunoașterea a ceea ce este și nu este state (și a nu duplica valorile derivabile) este primul pas către gestionarea bună a acestuia; totul în state management se construiește pe acest concept.