State Updates and Batching in React

30‑second interview answer

React may batch multiple state updates into a single re-render to improve performance. When the next state depends on the previous state, you should use the functional updater form: setState(prev => next). Avoid storing duplicate/derived state; keep one source of truth and derive values during render.

What is batching?

Batching means:

• multiple updates happen
• React performs one render instead of many

This makes UI faster and prevents unnecessary work.

In modern React (React 18), batching happens in more places than before.

The most important rule: use functional updates

Bad when you depend on previous state:

setCount(count + 1);
setCount(count + 1);

This can produce +1 instead of +2 because both lines captured the same count.

Good:

setCount((c) => c + 1);
setCount((c) => c + 1);

Now the second update receives the updated value.

Derived state pitfalls

Anti-pattern: storing derived values

const [fullName, setFullName] = useState(first + ' ' + last); // ❌

If first or last change, fullName can drift.

Better:

const fullName = `${first} ${last}`;

Keep source of truth. Derive in render.

Updates are async-ish (don’t rely on immediate state)

setState schedules an update. Don’t expect state to change immediately in the same call stack.

If you need to react to state changes, use useEffect.

When multiple state variables depend on each other

If you find yourself doing many state variables that change together, consider useReducer.

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
}

Reducers can make updates more predictable.

Interview trap: “Does React always batch?”

Safe answer:

“React batches in many cases, especially inside React event handlers and in React 18 more broadly. But I still write updates using functional updaters when they depend on previous state.”

Mini Q&A

Q1: Why use functional updates?

• To avoid stale values when multiple updates are batched.

Q2: What’s derived state?

• State that can be computed from other state/props.

Q3: When use useReducer?

• When state transitions are complex or multiple updates need to be coordinated.

Summary checklist

• I can define batching.
• I use functional updates when needed.
• I avoid derived state duplicates.
• I know when to use useReducer.