L-istat huwa kwalunkwe dejta li tista' tinbidel mal-ħin u li l-UI tiddependi fuqha biex terendi. Meta l-istat jinbidel, l-UI tağğorna biex tirrifletti dan. Hija l-"memorja" tal-applikazzjoni tiegħek fi kwalunkwe mument partikolari.
✓ 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 prinċipali tal-frameworks moderni: UI = f(state). Ma tiddifikaċċjax il-DOM manwalment; tibdel l-istat, u l-framework jerendi mill-ġdid il-UI biex taqbel. Kklikkja l-buttuna → count jinbidel → in-numru murija jitġodda awtomatikament.
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
Mhux kull varjabbli hija istat — biss dejta li tinbidel u teħtieġ l-effett fuq dak li jerendi. Il-valuri li tista' tikkomputa mid-dejta eżistenti ta' l-istat m'għandu jkollhomx jinżammu bħala istat separati (hekk hemm risk li jibqu barra mis-sinkronizzazzjoni).
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)
Fhem l-istat bħala "dejta li tinbidel u tidawwel il-UI" huwa l-pedament tal-iżvilupp kollu tal-frontend.
Il-mudell mentali UI = f(state) jispjega kif taħdem React/Vue/Angular — tiddaħħal l-istat, u l-vista ssegwi.
Rikonoxxi x'inhu u x'inhu mhux istat (u ma ssalvaċċjax il-valuri li jiġu derivati) hija l-ewwel pass lejn idaħħal tajjeb; kull ħaġa fil-management tal-istat tibni fuq dan il-kunċett.