State: Making Components Remember

Use the useState hook to give a component memory that survives between renders — and watch React re-render automatically when it changes.

Step 1 of 2

Props come in; state lives inside

Props are data passed in from a parent, and they're read-only. But lots of things need to change inside a component over time: a like count, the text in a search box, whether a menu is open. That changing, component-owned data is called state.

You might think "I'll just use a normal variable." The problem: a plain variable change doesn't tell React to update the screen, and the variable resets to its starting value every time the component re-runs. State solves both: React remembers it between renders, and changing it tells React to re-render.

You create state with the useState hook:

const [count, setCount] = useState(0);

count — the current value (starts at 0).
setCount — the function you call to change it.
useState(0) — sets the starting value.

When you call setCount(count + 1), React updates the value and re-runs the component so the screen matches. This is the magic from lesson 1, finally in your hands.

Think of it this way: State is a whiteboard a component keeps next to its desk. Props are a memo handed to it from the boss (can't be edited). The whiteboard is the component's own — it can wipe and rewrite it, and whenever it does, React repaints the part of the screen that showed it.

Web Standard — the Rules of Hooks

Functions starting with use (like useState) are called hooks. Call them only at the top level of your component — never inside an if, a loop, or a nested function. React relies on hooks being called in the same order every render.

Learn more on MDN

React.dev — State: a component's memory React.dev — useState