Updating state in React - Step-by-Step Execution

Concept Flow - Updating state

Initial Render

↓

Display UI with state

↓

User triggers event

↓

Call setState(newValue)

↓

React schedules re-render

↓

Component re-renders with updated state

↓

DOM updates to reflect new state

↓

Wait for next event or interaction

This flow shows how React updates state: user event triggers setState, React re-renders the component, and the UI updates.

Execution Sample

React

import React, { useState } from 'react';

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

A simple counter button that increases the count state by 1 each time it is clicked.

Execution Table

Step	Trigger	State Before	Action	State After	What Re-renders	DOM Change
1	Initial render	count = 0	Render component	count = 0	Counter component	Button shows 'Count: 0'
2	User clicks button	count = 0	setCount(1) called	count = 1	Counter component	Button updates to 'Count: 1'
3	User clicks button	count = 1	setCount(2) called	count = 2	Counter component	Button updates to 'Count: 2'
4	User clicks button	count = 2	setCount(3) called	count = 3	Counter component	Button updates to 'Count: 3'
5	No further clicks	count = 3	No action	count = 3	No re-render	DOM unchanged

💡 Execution stops when no user events trigger state updates.

Variable Tracker

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

Key Moments - 3 Insights

Why does the component re-render after calling setCount?

Calling setCount updates the state, which tells React to re-render the component with the new state value, as shown in steps 2-4 of the execution_table.

Does React update the DOM immediately when setCount is called?

No, React schedules a re-render first, then updates the DOM after rendering completes, as seen between the 'Action' and 'DOM Change' columns in the execution_table.

What happens if setCount is called with the same value as current state?

React will not re-render the component because the state did not change, so the DOM remains unchanged. This is implied in step 5 where no action occurs.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'count' after step 3?

A 3

B 2

C 1

D 0

💡 Hint

Check the 'State After' column in row 3 of the execution_table.

At which step does the DOM update to show 'Count: 1'?

A Step 2

B Step 3

C Step 1

D Step 5

💡 Hint

Look at the 'DOM Change' column for when the button text changes to 'Count: 1'.

If the user never clicks the button, what happens to the state and DOM after initial render?

A State changes, DOM updates

B State stays same, DOM updates

C State stays same, DOM stays same

D State changes, DOM stays same

💡 Hint

Refer to step 5 in the execution_table where no action occurs.

Concept Snapshot

React state updates flow:
- useState creates state and setter
- setState triggers re-render
- Component re-renders with new state
- DOM updates reflect new state
- No re-render if state unchanged

Full Transcript

This visual execution shows how React updates state using useState. Initially, the component renders with count 0. When the user clicks the button, setCount is called with count + 1. React schedules a re-render, then updates the component and DOM to show the new count. This repeats for each click. If no clicks happen, state and DOM stay the same. Key points: setState triggers re-render, DOM updates after render, no re-render if state unchanged.