React State Snapshots and Event Handlers

Each render sees a state snapshot. Setting state requests another render rather than mutating the value captured by the current handler.

Before you start

You should know how a function component renders JSX, receives props and handles events. Follow the value through render, interaction and the next render. Small snippets below belong inside an existing React application unless they are explicitly shown as complete components.

The practical goal is to reason through this situation: Two setCount(count + 1) calls can request the same next value. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.

Step-by-step walkthrough

Step 1: Trace the render

Start with count equal to zero. The event handler closes over that render’s value, even while updates are queued.

Step 2: Compare replacement updates

Both setCount(count + 1) calls calculate one. They request the same replacement rather than composing two increments.

Step 3: Queue transformations

Use setCount(previous => previous + 1) twice. Each queued transformation receives the result of the previous one.

Worked scenario

Two setCount(count + 1) calls can request the same next value.

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => {
    setCount(previous => previous + 1);
    setCount(previous => previous + 1);
  }}>{count}</button>;
}

JSX

Import useState from React. Clicking advances zero to two: the queued operations calculate zero-to-one, then one-to-two. The handler’s captured count itself remains zero until the next render supplies another handler.

Common mistake

Reading state immediately after setting it still sees the current render’s snapshot.

Verify the behavior

Compare replacement and functional versions from the same initial state. Click again and predict the next value before observing it.

Interview exercise

Increment twice reliably.

Answer and reasoning

Use two functional updates, each deriving its value from the queued previous state.

Continue learning

Compare the scenario with the React interview questions and test your understanding with the React MCQs. For terminology and implementation details, consult the reference material.