What is the useState Hook in React?
Learn what the useState Hook is in React, how it returns a value and setter, the functional updater pattern, and code examples with interview questions.
Expected Interview Answer
useState is a React Hook that lets a function component hold local, reactive state — it returns the current value and a setter function that updates the value and re-renders the component.
You call useState with an initial value and destructure the pair it returns: const [value, setValue] = useState(initial). Calling setValue with a new value (or an updater function of the previous value) schedules a re-render so the UI reflects the change. State is preserved across renders, and when the new value depends on the old one you should use the functional form setValue(prev => prev + 1) to avoid stale reads.
- Adds local state to function components without classes
- Automatically re-renders the UI when state changes
- Preserves state across re-renders
- Supports lazy initialization for expensive initial values
- Functional updater form avoids stale-state bugs
AI Mentor Explanation
useState is like the scoreboard operator for a single stat. You start it at zero (the initial value) and hand out one lever — the setter — to bump the score. Every time a run is scored you pull the lever, the board updates, and everyone sees the new total. The operator remembers the last number between balls just as state persists across renders.
Step-by-Step Explanation
Step 1
Import the hook
Bring in useState from React at the top of your file.
Step 2
Call it with an initial value
Invoke useState(initialValue) inside your component's body.
Step 3
Destructure the pair
Read the current value and its setter: const [value, setValue] = useState(0).
Step 4
Render the value
Use the value in JSX so the UI reflects the current state.
Step 5
Update with the setter
Call setValue(next) or setValue(prev => ...) to change state and trigger a re-render.
What Interviewer Expects
- useState returns a [value, setter] pair
- Understanding that the setter triggers a re-render
- Knowledge of the functional updater form for dependent updates
- Awareness that state persists across re-renders
- Rules of Hooks: call at the top level, not in loops or conditions
Common Mistakes
- Mutating state directly instead of calling the setter
- Assuming state updates are applied synchronously right after the call
- Using the stale value instead of the functional updater when the new value depends on the old
- Calling useState inside a loop, condition, or nested function
- Putting derived data in state instead of computing it during render
Best Answer (HR Friendly)
“useState is a tool in React that lets a component remember a value, like a counter or a form input, and update it. When you change that value, React automatically refreshes what the user sees on the screen.”
Code Example
import { useState } from 'react'
function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(prev => prev + 1)}>
Click me
</button>
</div>
)
}Follow-up Questions
- Why should you use the functional updater form of setState?
- Are state updates synchronous or asynchronous?
- What is lazy initialization in useState?
- What are the Rules of Hooks?
- How does useState differ from useReducer?
MCQ Practice
1. What does useState return?
useState returns a two-element array: the current state value and a function to update it.
2. Which form avoids stale-state bugs when incrementing?
The functional updater receives the latest state, so it avoids reading a stale closed-over value.
3. Where must useState be called?
The Rules of Hooks require Hooks to be called at the top level so their order stays consistent across renders.
Flash Cards
What does useState return? — A pair: [currentValue, setterFunction].
How do you update state safely from the previous value? — Use the functional form: setValue(prev => newValue).
Are state updates immediate? — No. They are batched and applied before the next render, not synchronously after the call.
What is lazy initialization? — Passing a function to useState so the expensive initial value is computed only once.