Skip to main content

Frontend engineering · Frameworks

State

Also called: State management, Component state, useState

Data a component keeps track of itself that changes as the user interacts. When state changes, the matching part of the page re-renders automatically.

In detail

State is like a scoreboard at a game: when the score changes, the numbers on the big screen change with it. Whether a dialog is open, what's typed in an input, which page a list is on, how many items are in the cart: any data that "changes, and the page has to change with it" is state.

In React, you usually declare state with useState, and you have to change it through the update function it gives you. If you change the variable directly, the page won't update. State used by only one component is local state. State needed on many pages (like the logged-in user's info) is global state, often managed with Context, Zustand, Pinia, and similar tools.

How it differs from Props: props are passed in by the parent and are read-only. State belongs to the component and can be changed. A common problem is putting state in the wrong place, so two parts of the page get out of sync.

Developer info
Term ID
eng-state
DOM selectors
No DOM cues. This concept isn't detected directly on a page.
Priority
1 · when several match at the same level, the higher priority wins
Version
v1 · updated Sep 29, 2026