State on kaikki data, joka voi muuttua ajan kuluessa ja johon käyttöliittymä on riippuvainen renderöinnissään. Kun state muuttuu, käyttöliittymä päivittyy sen heijastamiseksi. Se on sovelluksesi "muisti" joko hetkenä.
✓ 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>
);
}
Modernien kehysten ydinidea: UI = f(state). Et päivitä DOM:ia manuaalisesti; muutat statea ja kehys renderöi käyttöliittymän uudelleen vastaamaan sitä. Napsauta painiketta → count muuttuu → näytetty numero päivittyy automaattisesti.
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
Kaikki muuttujat eivät ole state — vain data, joka muuttuu ja vaikuttaa siihen, mitä renderöidään. Arvot, jotka voit laskea olemassa olevasta statesta, ei tulisi tallentaa erillisenä statena (niillä on riski jäädä epäsynkroonisiksi).
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)
Staten ymmärtäminen "dataksi, joka muuttuu ja ohjaa käyttöliittymää" on kaikki frontend-kehityksen perusta.
Mentaalimalli UI = f(state) selittää kuinka React/Vue/Angular toimii — hallitset statea ja näkymä seuraa.
Tunnistaminen siitä, mikä on ja ei ole state (eikä johdettavien arvojen kopioiminen) on ensimmäinen askel sen hallintaan; kaikki state-hallinnassa perustuu tähän käsitteeseen.