AceDevHub
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.