Intermediate React Interview QuestionsIntermediateCode Output
React · Question 36
After one click, what value does this counter display when updater functions are used?
Direct answer
After one click, the counter displays 3 because React applies each queued updater to the result of the previous updater.
Counter.jsx
function Counter() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(c => c + 1);
setCount(c => c + 1);
setCount(c => c + 1);
}
return <button onClick={handleClick}>{count}</button>;
}Output
After one click: 3
React processes the updater queue in order: 0 becomes 1, then 2, then 3. Updater functions should be pure because React may call them more than once in development to detect mistakes.