Re-rendering behavior in React - Step-by-Step Execution

Concept Flow - Re-rendering behavior

Initial Render

↓

Component Renders JSX

↓

User Interaction or State Change

↓

setState Called

↓

React Schedules Re-render

↓

Component Re-renders with New State

↓

DOM Updates with Differences

↓

Render Complete

This flow shows how React renders a component initially, then re-renders it when state changes, updating the DOM efficiently.

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 JSX	count = 0	Counter component	Button shows 'Count: 0'
2	User clicks button	count = 0	setCount(1)	count = 1	Counter component	Button updates to 'Count: 1'
3	User clicks button	count = 1	setCount(2)	count = 2	Counter component	Button updates to 'Count: 2'
4	User clicks button	count = 2	setCount(3)	count = 3	Counter component	Button updates to 'Count: 3'
5	No more clicks	count = 3	No action	count = 3	No re-render	DOM unchanged

💡 Execution stops when no further user interaction triggers state changes.

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 when setCount is called?

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

Does React re-render the whole page when state changes?

No, React only re-renders the component where state changed and updates the DOM efficiently, not the entire page. This is seen in the 'What Re-renders' and 'DOM Change' columns.

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 actually change, so no DOM update occurs. This is implied in step 5 where no action means no re-render.

Visual Quiz - 3 Questions

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

A 2

B 1

C 3

D 0

💡 Hint

Check the 'State After' column in row with Step 3.

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

A Step 1

B Step 2

C Step 3

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, how many times does the component re-render?

A 3 times

B 0 times

C 1 time

D Infinite times

💡 Hint

Refer to Step 1 and Step 5 in the execution_table about initial render and no further re-renders.

Concept Snapshot

React re-renders a component when its state changes.
Use useState to hold state.
Calling setState schedules a re-render.
Only the component with changed state re-renders.
DOM updates reflect new state efficiently.
No re-render if state value is unchanged.

Full Transcript

This visual execution shows how React components render and re-render. Initially, the Counter component renders with count 0. When the user clicks the button, setCount updates the state, triggering React to re-render the component with the new count. The DOM updates only the button text to show the new count. This process repeats with each click, increasing count and updating the display. If the state does not change, React skips re-rendering to optimize performance.