Callback functions for state updates in React - Step-by-Step Execution

Concept Flow - Callback functions for state updates

User triggers event

↓

Event handler calls setState

↓

setState uses callback function

↓

Callback receives previous state

↓

Callback returns new state

↓

React updates state

↓

Component re-renders with new state

When updating state based on previous state, React calls the callback with the old state, then updates state and re-renders.

Execution Sample

React

const [count, setCount] = useState(0);

function increment() {
  setCount(prev => prev + 1);
}

// User clicks button -> increment() runs

This code updates a counter state by adding 1 using a callback function to ensure the latest state is used.

Execution Table

Step	Action	State Before	Callback Argument	Callback Return	State After	Component Re-render
1	Initial render	count = 0	N/A	N/A	count = 0	Render with count=0
2	User clicks button	count = 0	N/A	N/A	count = 0	No change yet
3	increment() calls setCount with callback	count = 0	prev = 0	0 + 1 = 1	count = 1	Re-render with count=1
4	User clicks button again	count = 1	N/A	N/A	count = 1	No change yet
5	increment() calls setCount with callback	count = 1	prev = 1	1 + 1 = 2	count = 2	Re-render with count=2
6	User clicks button third time	count = 2	N/A	N/A	count = 2	No change yet
7	increment() calls setCount with callback	count = 2	prev = 2	2 + 1 = 3	count = 3	Re-render with count=3

💡 No more clicks, state updates stop.

Variable Tracker

Variable	Start	After 1	After 2	After 3
count	0	1	2	3

Key Moments - 3 Insights

Why do we use a callback function inside setCount instead of directly passing count + 1?

Because React state updates may be asynchronous, using a callback ensures we get the latest previous state value (see execution_table step 3 and 5).

What does the 'prev' argument in the callback represent?

'prev' is the previous state value before the update, allowing safe calculation of the new state (see execution_table column 'Callback Argument').

When does the component re-render after calling setCount with a callback?

The component re-renders after React applies the new state returned by the callback (see execution_table steps 3, 5, 7).

Visual Quiz - 3 Questions

Look at the execution_table at step 3. What is the value of 'count' after the callback runs?

A 1

B 0

C undefined

D 2

💡 Hint

Check the 'State After' column at step 3 in the execution_table.

At which step does the component re-render with count = 2?

A Step 4

B Step 5

C Step 6

D Step 7

💡 Hint

Look for 'Re-render with count=2' in the 'Component Re-render' column.

If we changed setCount(prev => prev + 1) to setCount(count + 1), what problem might occur?

A The component will never re-render

B The callback will not receive any argument

C State updates might use stale values causing incorrect counts

D React will throw an error

💡 Hint

Refer to the key_moments explanation about asynchronous state updates.

Concept Snapshot

Callback functions in setState:
- Use setState(prev => newState) to update based on previous state.
- React passes previous state as argument to callback.
- Callback returns new state value.
- Ensures correct updates even with async state changes.
- Component re-renders after state update.

Full Transcript

This visual trace shows how React updates state using callback functions. When a user clicks a button, the increment function calls setCount with a callback. React passes the previous state value to this callback, which returns the new state by adding one. The state updates and the component re-renders with the new count. This method avoids bugs from asynchronous updates by always using the latest state. The execution table tracks each step, showing state before, callback argument, returned value, and state after. Key moments clarify why callbacks are needed and when re-renders happen. The quiz tests understanding of state values and update timing.