What is state in a frontend application?

Question

Accepted Answer

**State** is any data that can **change over time** and that the UI depends on to render. When state changes, the UI updates to reflect it. It's the "memory" of your application at any given moment. ## Examples of state ```text ✓ 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 ``` ## State drives the UI ```jsx function Counter() { const [count, setCount] = useState(0); // `count` is state return ( ); } ``` The core idea of modern frameworks: **UI = f(state)**. You don't manually update the DOM; you change state, and the framework re-renders the UI to match. Click the button → `count` changes → the displayed number updates automatically. ## State vs other data ```text 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 ``` Not every variable is state — only data that changes *and* affects what's rendered. Values you can compute from existing state shouldn't be stored as separate state (that risks them getting out of sync). ## Categories of state ```text 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) ``` ## Why it matters Understanding state as "data that changes and drives the UI" is the foundation of all frontend development. The mental model **UI = f(state)** explains how React/Vue/Angular work — you manage state, and the view follows. Recognizing what *is* and *isn't* state (and not duplicating derivable values) is the first step toward managing it well; everything in state management builds on this concept.