State — это любые данные, которые могут изменяться со временем и от которых зависит отображение UI. Когда state изменяется, UI обновляется, чтобы это отразить. Это "память" вашего приложения в любой момент времени.
✓ 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>
);
}
Основная идея современных фреймворков: UI = f(state). Вы не обновляете DOM вручную; вы изменяете state, и фреймворк перерендеривает UI для соответствия. Нажмите кнопку → count изменяется → отображаемое число обновляется автоматически.
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
Не каждая переменная является state — только данные, которые изменяются и влияют на то, что отображается. Значения, которые вы можете вычислить из существующего state, не должны храниться как отдельный state (это может привести к рассинхронизации).
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)
Понимание state как "данных, которые изменяются и управляют UI" является основой всей frontend-разработки.
Модель мышления UI = f(state) объясняет, как работают React/Vue/Angular — вы управляете state, и представление следует за ним.
Попонимание того, что является и что не является state (и недублирование производных значений), — первый шаг к хорошему управлению state; всё в управлении state построено на этой концепции.