Updater functions calculate new state from previous state. Keep them pure so evaluation does not perform duplicate external work.
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: Append a new item by returning a new array from the updater. 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: Define the transition
An append operation should calculate a new collection from the previous collection without changing the original.
Step 2: Move external work out
Create the item in the event handler. Logging an audit request inside an updater makes execution depend on state evaluation.
Step 3: Return fresh state
Return […previous, item]. Keep network requests and analytics in the action or synchronization layer with clear delivery rules.
Worked scenario
Append a new item by returning a new array from the updater.
function addItem() {
const item = { id: crypto.randomUUID(), text: draft };
setItems(previous => [...previous, item]);
recordUserAction(item.id); // application-provided function
}The updater only computes state. The action handler owns the external event; if server delivery must survive retries, give that event a stable identity and deduplicate server-side.
Common mistake
Sending analytics or requests inside an updater couples effects to state calculation.
Verify the behavior
Freeze previous state during a development test. Confirm appending does not mutate it, and verify the external action is not hidden inside state calculation.
Interview exercise
Where should an audit event run?
Answer and reasoning
In the action handler or an appropriate synchronization layer, with an idempotency strategy where duplicate delivery matters.
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.