What is useState in React?
Learn what useState does in React, how to declare and update local state, why functional updates matter, and how it triggers component re-renders.
Expected Interview Answer
useState is a React hook that adds local, mutable state to a function component, returning the current value and a setter function you call to update it and trigger a re-render.
You call useState with an initial value, and it returns a two-element array: the current state value and a function to update it, typically destructured as [value, setValue]. Calling the setter schedules a re-render with the new value; React does not mutate the existing state in place, so you always pass a brand-new value or an updater function. When the new state depends on the previous state, you should pass a function to the setter, like setCount(prev => prev + 1), to avoid stale values from batched updates. Each call to useState in a component creates an independent piece of state, and React preserves that state across re-renders as long as the component stays mounted in the same position in the tree.
- Adds memory to function components
- Triggers automatic re-renders on change
- Simple API: value plus setter
- Supports functional updates for reliable batching
- State persists across re-renders while mounted
AI Mentor Explanation
useState is like the scoreboard operator's own runs tally that updates only when they punch in a new number, never by someone reaching over and scribbling on the board directly. Every time a run is scored, they press the button (the setter) with the new total, and the whole stadium display refreshes to match.
Step-by-Step Explanation
Step 1
Import useState
Import useState from 'react' at the top of the component file.
Step 2
Declare state
Call useState(initialValue) and destructure the result into [value, setValue].
Step 3
Read the value
Use the current value directly in JSX to display it.
Step 4
Call the setter
Invoke setValue with a new value or an updater function inside an event handler.
Step 5
React re-renders
React schedules a re-render with the updated state and reflects it in the UI.
Step 6
Use functional updates when needed
Pass a function to the setter when the new state depends on the previous state to avoid stale reads.
What Interviewer Expects
- Describes useState's return shape [value, setter]
- Explains calling the setter triggers a re-render
- Knows state should never be mutated directly
- Understands functional updates for dependent state
- Mentions each useState call is independent state
Common Mistakes
- Mutating the state variable directly instead of calling the setter
- Assuming the setter updates state synchronously
- Not using a functional update when new state depends on old state
- Calling useState conditionally, breaking hook order
- Confusing useState with useRef for values that shouldn't trigger renders
Best Answer (HR Friendly)
“useState lets a piece of a webpage remember information, like how many times a button was clicked, and automatically update what's shown on screen whenever that information changes. It's the basic tool that makes a React component interactive.”
Code Example
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
// functional update avoids stale state in rapid clicks
setCount((prev) => prev + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Add</button>
</div>
);
}Follow-up Questions
- Why should you use a functional update with the setter?
- What happens if you call the state setter with the same value?
- How is useState different from useReducer?
- Can you have multiple useState calls in one component?
- Does calling the setter update the state variable immediately?
MCQ Practice
1. What does useState return?
useState returns a two-element array containing the current value and a function to update it.
2. What should you do when new state depends on the previous state?
Passing an updater function like prev => prev + 1 guarantees you work from the latest state value.
3. What happens when the state setter is called?
Calling the setter schedules React to re-render the component with the new state value.
Flash Cards
What does useState return? — An array containing the current state value and a setter function to update it.
Can you mutate state directly? — No — always call the setter with a new value or updater function instead.
When should you use a functional update? — When the new state depends on the previous state, to avoid stale values.
Does each useState call create separate state? — Yes, each call manages its own independent piece of state.