State to dowolne dane, które mogą się zmieniać w czasie i od których UI zależy, aby je wyrenderować. Gdy stan zmienia się, interfejs użytkownika aktualizuje się, aby to odzwierciedlić. To "pamięć" twojej aplikacji w danym momencie.
✓ 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>
);
}
Podstawowa idea nowoczesnych frameworków: UI = f(state). Nie aktualizujesz ręcznie DOM; zmieniasz state, a framework ponownie renderuje interfejs, aby go dopasować. Kliknij przycisk → count zmienia się → wyświetlana liczba aktualizuje się automatycznie.
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
Nie każda zmienna jest state — tylko dane, które się zmieniają i wpływają na renderowanie. Wartości, które możesz obliczyć na podstawie istniejącego state, nie powinny być przechowywane jako oddzielny state (ryzyko utraty synchronizacji).
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)
Zrozumienie state jako "danych, które się zmieniają i napędzają interfejs" jest fundamentem całego frontendu.
Model myślowy UI = f(state) wyjaśnia, jak działają React/Vue/Angular — zarządzasz state, a widok go podąża.
Przypomnienie sobie, co jest i nie jest state (oraz niezduplikowanie wartości pochodnych) to pierwszy krok do jego dobrze zarządzanego; wszystko w state management opiera się na tej koncepcji.