State je kateri koli podatek, ki se s časom spreminja in od katerega je odvisna upodobitev vmesnika. Ko se state spremeni, se vmesnik posodablja, da se to odraža. To je "spomin" aplikacije v danem trenutku.
✓ 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>
);
}
Osrednja ideja sodobnih ogrodij: UI = f(state). Ne posodabljate ročno DOM; spremenite state in ogrodje ponovno upodobi vmesnik, da se ujema. Kliknete gumb → count se spremeni → prikazana številka se samodejno posodablja.
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
Ne vsaka spremenljivka je state — samo podatki, ki se spremenijo in vplivajo na to, kaj se upodobi. Vrednosti, ki jih lahko izračunate iz obstoječega state-a, ne bi smele biti shranjene kot ločen state (to tveganje, da se razsinhroniziajo).
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)
Razumevanje state-a kot "podatkov, ki se spreminjajo in poganjajo vmesnik" je temelj celotnega razvoja front-enda.
Mentalni model UI = f(state) pojasnjuje, kako delujejo React/Vue/Angular — upravljate state in pogled ga sledi.
Prepoznavanje tega, kaj je in kaj ni state (in neduplikacija izpeljanih vrednosti) je prvi korak k dobri upravljanju stanja; vse v upravljanju stanja temelji na tem konceptu.
Knjižnica IT vprašanj za razgovore s podrobnimi odgovori — od začetnika do izkušenega.
Doniraj