Stav (State) jsou libovolná data, která se mohou měnit v průběhu času a na kterých závisí vykreslení uživatelského rozhraní. Když se stav změní, uživatelské rozhraní se aktualizuje, aby to odráželo. Je to "paměť" vaší aplikace v daném okamžiku.
✓ 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>
);
}
Základní myšlenka moderních frameworků: UI = f(state). Nemůžete ručně aktualizovat DOM; změníte stav a framework znovu vykreslí uživatelské rozhraní, aby se shodovalo. Klikněte na tlačítko → změní se count → zobrazené číslo se automaticky aktualizuje.
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 každá proměnná je stav — pouze data, která se mění a ovlivňují to, co se vykresluje. Hodnoty, které můžete vypočítat z existujícího stavu, by se neměly ukládat jako samostatný stav (riskuje to jejich desynchronizaci).
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)
Chápání stavu jako "dat, která se mění a řídí uživatelské rozhraní", je základem všeho vývoje front-endu.
Mentální model UI = f(state) vysvětluje, jak fungují React/Vue/Angular — spravujete stav a pohled se řídí.
Poznat, co je a není stav (a nezdvojovat odvozitelné hodnoty), je prvním krokem k jeho dobré správě; vše ve správě stavu je na tomto konceptu postaven.