Updating phase in React - Step-by-Step Execution

Concept Flow - Updating phase

Event or State Change

↓

React schedules update

↓

Component re-renders

↓

JSX evaluated with new state/props

↓

React compares new and old DOM (diff)

↓

DOM updates applied

↓

Browser shows updated UI

When state or props change, React re-renders the component, compares the new output with the old, and updates the browser view.

Execution Sample

React

import { useState } from 'react';

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

A button that shows a number 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	Counter component	Button shows '0'
2	Click button	count=0	setCount(count+1)	count=1	Counter component	Button updates to '1'
3	Re-render after state update	count=1	Render component	count=1	Counter component	Button shows '1'
4	Click button	count=1	setCount(count+1)	count=2	Counter component	Button updates to '2'
5	Re-render after state update	count=2	Render component	count=2	Counter component	Button shows '2'
6	No further clicks	count=2	No action	count=2	No re-render	No DOM change

💡 No more events trigger updates, so React stops re-rendering.

Variable Tracker

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

Key Moments - 3 Insights

Why does React re-render the component after setCount is called?

React schedules an update when state changes (see step 2 in execution_table). This triggers a re-render to update the UI.

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

No, React only re-renders the component where state or props changed (see 'What Re-renders' column). It updates only the necessary DOM parts.

Why does the DOM update only after React compares new and old output?

React uses a diffing process to update only what changed for efficiency (see concept_flow). This avoids unnecessary DOM changes.

Visual Quiz - 3 Questions

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

A 1

B 0

C 2

D Undefined

💡 Hint

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

At which step does React apply the DOM update to show '1' on the button?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look for the 'DOM Change' column showing button updates to '1'.

If the button is clicked again after step 5, what will happen next?

A count becomes 3 and component re-renders

B count stays 2 and no re-render

C count resets to 0

D Component unmounts

💡 Hint

Refer to the pattern of state updates and re-renders in execution_table steps 2-5.

Concept Snapshot

React Updating Phase:
- Triggered by state or props change
- React schedules re-render
- Component function runs again
- JSX output compared to previous
- Only changed DOM parts updated
- Browser shows new UI
- Efficient and fast updates

Full Transcript

The React updating phase starts when an event or state change happens, like clicking a button. React schedules an update and re-renders the component by running its function again with new state or props. It compares the new JSX output with the old one to find differences. Then React updates only the changed parts of the DOM. This process repeats for each state change, making the UI update smoothly and efficiently without reloading the whole page.

Practice

1. What happens during the updating phase in a React component?

easy

A. The component is removed from the screen

B. The component is created for the first time

C. The component's styles are applied

D. The component re-renders when state or props change

Solution

1. Step 1: Understand React component lifecycle phases

   The updating phase happens after the initial render when state or props change.

2. Step 2: Identify what triggers re-rendering

   State or props changes cause React to re-render the component to update the UI.

3. Final Answer:

   The component re-renders when state or props change -> Option D

4. Quick Check:

   Updating phase = re-render on state/props change [OK]

Hint: Updating phase means re-render on state or props change [OK]

Common Mistakes:

• Confusing updating with mounting or unmounting phases
• Thinking styles apply only during updating
• Believing updating happens without state or props change

2. Which of the following is the correct way to update state in a React functional component during the updating phase?

easy

A. this.setState({ count: count + 1 })

B. setCount(count + 1)

C. updateState(count + 1)

D. changeState({ count: count + 1 })

Solution

1. Step 1: Identify state update method in functional components

   Functional components use the setter function from useState, e.g., setCount.

2. Step 2: Check syntax correctness

   setCount(count + 1) correctly updates the state by adding 1.

3. Final Answer:

   setCount(count + 1) -> Option B

4. Quick Check:

   Use setter from useState to update state [OK]

Hint: Use setter from useState to update state [OK]

Common Mistakes:

• Using this.setState in functional components
• Calling non-existent functions like updateState
• Trying to mutate state directly

3. Consider this React component snippet:

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

useEffect(() => {
  console.log('Count changed:', count);
}, [count]);

setCount(1);
setCount(2);

What will be logged to the console after these updates?

medium

A. Count changed: 1Count changed: 2

B. No output

C. Count changed: 2

D. Count changed: 0Count changed: 1Count changed: 2

Solution

1. Step 1: Understand state updates batching

   Multiple state updates in the same event batch are combined; only the last update triggers effect.

2. Step 2: Analyze useEffect dependency

   useEffect runs after render when count changes, so it logs only once with the final value 2.

3. Final Answer:

   Count changed: 2 -> Option C

4. Quick Check:

   State updates batch; effect logs last value [OK]

Hint: Multiple state updates batch; effect runs once with last value [OK]

Common Mistakes:

• Assuming useEffect runs after every setCount call immediately
• Expecting console to log intermediate values
• Not knowing React batches state updates

4. What is wrong with this React code snippet during the updating phase?

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

function increment() {
  count = count + 1;
  setCount(count);
}

medium

A. Directly modifying state variable instead of using setter

B. Missing dependency array in useEffect

C. Using setCount with a number instead of an object

D. Not returning JSX from the component

Solution

1. Step 1: Identify state mutation

   The code directly changes count variable, which is not allowed in React state management.

2. Step 2: Correct way to update state

   Use setCount(count + 1) without modifying count directly.

3. Final Answer:

   Directly modifying state variable instead of using setter -> Option A

4. Quick Check:

   Never mutate state variable directly; use setter [OK]

Hint: Never assign state variable directly; always use setter [OK]

Common Mistakes:

• Trying to change state variable directly
• Confusing state variable with setter function
• Ignoring React's immutable state rule

5. You want to update a React component's state only when a prop value changes, avoiding unnecessary re-renders. Which approach correctly uses the updating phase to achieve this?

function MyComponent({ value }) {
  const [state, setState] = useState(value);

  // What should go here?
}

hard

A. useEffect(() => { setState(value); }, [value]);

B. useEffect(() => { setState(value); }, []);

C. setState(value); // directly in component body

D. useEffect(() => { setState(value); });

Solution

1. Step 1: Use useEffect to react to prop changes

   To update state only when value prop changes, use useEffect with [value] dependency.

2. Step 2: Avoid unnecessary updates

   Dependency array ensures effect runs only when value changes, preventing infinite loops or extra renders.

3. Final Answer:

   useEffect(() => { setState(value); }, [value]); -> Option A

4. Quick Check:

   useEffect with [value] updates state on prop change only [OK]

Hint: Use useEffect with dependency array for prop-based updates [OK]

Common Mistakes:

• Leaving dependency array empty causing no updates
• Calling setState directly in component body causing infinite loops
• Omitting dependency array causing effect on every render