State is data that changes over time inside a component. useState returns the current value and a setter function. When state updates, React re-renders the component.
Basic pattern
const { useState } = React;
const [count, setCount] = useState(0);Rules of hooks
- Only call hooks at the top level of a component—not inside loops, conditions, or nested functions.
- Only call hooks from React function components or custom hooks.
- State updates are asynchronous; React may batch multiple setters in one render.
Functional updates
When the next state depends on the previous value, use the updater form: setCount((c) => c + 1). This avoids stale closures in rapid clicks or effects.
Important interview questions and answers
- Q: Props vs state?
A: Props come from parent and are read-only; state is owned and updated inside the component. - Q: Why functional setState?
A: Guarantees you compute from the latest state when multiple updates happen close together.
Self-check
- What triggers a re-render after
setCount? - Why can’t you call
useStateinside anif?
Challenge
Click counter
- Click the button three times.
- Change the increment to add 2 per click using a functional updater.
Done when: the count increases by 2 on each click.
Challenge
Counter from scratch
- Add a second button that subtracts.
- Prevent count from going below zero.
Done when: counter cannot display negative values.
Interview prep
- How does useState behave?
Updates batch asynchronously; use the updater callback when the next value depends on the previous. Never mutate objects/arrays in place.