State ni data yoyote inayoweza kubadilika kadri muda unavyopita na ambayo UI inatokea kwa ajili ya kukamatia. Wakati state inabadilika, UI inasasishwa ili kuonyesha hilo. Ni "kumbukumbu" ya programu kwa wakati wowote uliotakwa.
✓ 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>
);
}
Kikomo cha msingi cha fremu za kisasa: UI = f(state). Simu haisasishi DOM kwa mikono; unabadilisha state, na fremu inakamatia UI ili ilingane. Bonyeza kitufe → count inabadilika → nambari iliyoonyeshwa inasasishwa kiotomatiki.
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
Sio kila kutofautiana ni state — tu data inayobadilika na inayoathiri kile kinachokamatiwa. Maadili unayoweza kuhesabu kutoka kwa state iliyowepo haisemi kuwa imehifadhiwa kama state tofauti (hilo linariski kuwa sio sanjari).
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)
Kuelewa state kama "data inayobadilika na inaendesha UI" ni msingi wa maendeleo yote ya frontend.
Mifumo ya kiakili UI = f(state) inaeleza jinsi React/Vue/Angular inavyofanya kazi — unasimamia state, na mtazamo unafuata.
Kujua kile kinachohitajika ni na si state (na kutokupiga maumbile ya maadili yenye asili) ni hatua ya kwanza kuelekea kusimamia vizuri; kila kitu katika usimamizi wa state unajengwa kwa dhana hii.