Why does setState accept a callback function, and when should this pattern be used in React?

The callback function form of setState is used when the new state depends on the previous state.

React state updates can be asynchronous and batched, so relying directly on the current state value may lead to incorrect results.

Normal setState (Problem Case)

If multiple updates happen together, count may be stale, causing wrong values.

Callback Function Form (Correct Way)

Here, React provides the latest state value, ensuring the update is accurate.

Why this matters

• State updates may not happen immediately
• Multiple state updates can be grouped together
• The callback form avoids race conditions

When should you use it?

Use the callback function form when:

• The new state depends on the previous state
• Updating counters, toggles, or accumulative values
• Multiple state updates happen in the same render cycle