Hook · Local state
useState
Minimal memory
useState turns a component into something that remembers. Each call reserves a memory cell tied to that instance, and each update schedules a new render cycle.
The signature
const [state, setState] = useState(initial). The argument can be a value or a function — use the function when the initial calculation is expensive, so it only runs on the first render.
Functional update
When the next state depends on the previous one, pass a function to setState. React gives you the most recent value, avoiding race conditions when updating multiple times in the same event.
Common pitfalls
- 01Calling setState(state + 1) three times in a row only adds 1, not 3 — React reads the value captured by the render.
- 02State does not 'merge' like in classes: if you store an object, you must copy it entirely when updating.
- 03There is no way to change the dependency array of useState — the initial value is only honored on the first render.
Was this helpful?
Sign in to give feedback