State re-render behavior in React - Step-by-Step Execution

Concept Flow - State re-render behavior

Initial Render

↓

Component Renders with initial state

↓

User triggers event

↓

setState called

↓

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 components render initially, then re-render when state changes, updating the UI accordingly.

Execution Sample

React

import React, { useState } from 'react';

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

export default Counter;

A simple button that shows a count and increases it by 1 each time you click.

Execution Table

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

💡 No further state changes, so no more re-renders.

Variable Tracker

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

Key Moments - 3 Insights

Why does the whole component re-render when only the count changes?

React re-renders the entire functional component when state changes to update the UI. The execution_table rows 2 and 3 show the whole Counter component re-rendering with the new count.

Does React update the DOM immediately after setState is called?

No, React schedules the update and batches changes. The DOM updates after the component re-renders, as shown in execution_table steps 2 and 3.

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

React skips re-rendering because state didn't change. This is why in step 4, no re-render or DOM change happens.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'count' after step 2?

A 0

B 2

C 1

D Undefined

💡 Hint

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

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

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

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

If setCount was called with the same value as current count, what would happen?

A No re-render or DOM update

B Component re-renders but DOM does not update

C Component re-renders and DOM updates

D Error occurs

💡 Hint

Refer to step 4 in execution_table where no action leads to no re-render.

Concept Snapshot

React state changes cause the whole functional component to re-render.
Use useState to hold state and setState to update it.
When state changes, React schedules a re-render.
The DOM updates after re-render to reflect new state.
If state doesn't change, React skips re-rendering.
This keeps UI and state in sync efficiently.

Full Transcript

This lesson shows how React components update when state changes. Initially, the Counter component renders with count zero. When the user clicks the button, setCount updates the count state. React then re-renders the entire component with the new count value. The DOM updates to show the new count on the button. If the user clicks again, the process repeats with the updated count. If setCount is called with the same value, React skips re-rendering to optimize performance. This flow ensures the UI always matches the current state.