State
How apps remember things that change.
What is state?
State is data that changes over time. A plain HTML page is static: its content is baked in and never moves. State is what makes a UI interactive, the value behind a counter that climbs, a menu that knows whether it is open, a text field that updates as you type.
In frameworks like React, state is a special kind of variable. When you change it, the framework re-renders the parts of the UI that read it, rebuilding just those pieces of the screen. You don’t touch the DOM yourself; you change the data, and the screen follows.
Once you start looking, state is everywhere: whether a user is logged in, the items in a shopping cart, the current value of a search input, which tab is selected, whether a modal is showing.
Why it matters
Without state, keeping the screen current means finding the right DOM element and rewriting it by hand every time something changes. For a lone counter that is manageable. Add a dozen pieces that can each change the others, and the by-hand approach turns into a knot nobody wants to touch.
State is the single source of truth for your UI: one place the data lives, with the screen derived from it. When the two stay in sync automatically, you close off the most common UI bug there is, the screen showing something different from what the data actually says.
Miss the fourth spot
You update a display name where the profile shows it, then in the nav, then the welcome toast. You miss the fourth spot, and it's the one the user is staring at.
Stale UI
The data says the cart is empty; the badge still shows 3.
Tangled logic
A signup form starts simple. Then come password rules, a confirm field that has to match, an error under each input, a submit that only enables once all of it passes. Wire that by hand and every new rule threatens the last one.
Interactive demo
Before you touch it: clear the name field completely. What do you think the inspector shows for name, and what does the card render in its place? Edit the name, toggle Follow, and tap the heart, then check the panel on the right.
State Inspector
name"Batman"
followingfalse
likes0
Try breaking it:
- Type a number like
42into the name field, then read the inspector. Doesnamehold the number42or the text"42", and what in the inspector tells you which? - Tap the heart ten times fast. Each tap is a separate state update, so
likesclimbs one at a time and never skips a number. - Toggle Follow on and off. Only
followingflips betweentrueandfalse; the name and like count sit untouched.
How it works
The profile card is driven by three pieces of state. Edit the name, toggle Follow, or tap the heart, and the State Inspector on the right updates in step, showing the raw values the card reads from.
- name: a string, edited via the text input
- following: a boolean toggled by the Follow button
- likes: a number incremented by the heart button
Each keystroke or tap calls a state update, which triggers a re-render, which redraws what you see. You never reach into the page and edit it by hand, that is the shift the DOM page sets up. The inspector makes that invisible loop visible, a mini version of React DevTools.
If you remember one thing
Change the state and the UI redraws itself, no hand-editing the page required.