Multiple state variables in React - Step-by-Step Execution

Concept Flow - Multiple state variables

Component Render

↓

Initialize state variables

↓

Render JSX with state values

↓

User triggers event

↓

Call setState for one variable

↓

React schedules re-render

↓

Component re-renders with updated state

↓

Repeat on further events or exit

The component initializes multiple state variables separately, updates them independently on events, and re-renders reflecting the latest values.

Execution Sample

React

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  return (
    <div>...</div>
  );
}

This React component uses two separate state variables: count and name, each with its own setter.

Execution Table

Step	Action	count	name	Rendered Output
1	Initial render	0	''	Count: 0, Name: ''
2	User clicks increment button	setCount(1)	''	Count: 0, Name: '' (before re-render)
3	React re-renders with count=1	1	''	Count: 1, Name: ''
4	User types 'A' in input	1	setName('A')	Count: 1, Name: '' (before re-render)
5	React re-renders with name='A'	1	'A'	Count: 1, Name: 'A'
6	User clicks increment button again	setCount(2)	'A'	Count: 1, Name: 'A' (before re-render)
7	React re-renders with count=2	2	'A'	Count: 2, Name: 'A'
8	User types 'AB' in input	2	setName('AB')	Count: 2, Name: 'A' (before re-render)
9	React re-renders with name='AB'	2	'AB'	Count: 2, Name: 'AB'
10	No more events	2	'AB'	Count: 2, Name: 'AB'

💡 No more user events; component state remains stable.

Variable Tracker

Variable	Start	After Step 3	After Step 5	After Step 7	After Step 9	Final
count	0	1	1	2	2	2
name	''	''	'A'	'A'	'AB'	'AB'

Key Moments - 2 Insights

Why does updating one state variable not reset the other?

Because React state variables are independent; updating count with setCount does not affect name, as shown in steps 2-3 and 4-5 where only one variable changes.

Why does the rendered output show old state values before re-render?

React batches state updates and re-renders asynchronously; after calling setState, the UI shows previous values until React re-renders, as seen in steps 2 and 4.

Visual Quiz - 3 Questions

Look at the execution table at step 5. What is the value of 'name' after React re-renders?

A ''

B 'A'

C 'AB'

D undefined

💡 Hint

Check the 'name' column at step 5 in the execution_table.

At which step does 'count' first update to 2?

A Step 7

B Step 3

C Step 5

D Step 9

💡 Hint

Look at the 'count' column in execution_table rows to find when it becomes 2.

If the user types 'ABC' instead of 'AB', how would the variable_tracker change?

A Both 'count' and 'name' would reset to initial values.

B The 'count' variable would also change to 3.

C The final 'name' value would be 'ABC' instead of 'AB'.

D No change in variable_tracker.

💡 Hint

Consider how typing affects only the 'name' state variable as shown in variable_tracker.

Concept Snapshot

Multiple state variables in React:
- Use separate useState calls for each variable.
- Each state updates independently.
- setState triggers re-render with updated value.
- Previous state variables remain unchanged.
- UI updates after React re-renders.

Full Transcript

This example shows a React component with two state variables: count and name. Initially, count is 0 and name is empty. When the user clicks a button, setCount updates count, triggering a re-render that shows the new count but leaves name unchanged. When the user types in an input, setName updates name, triggering a re-render that updates the displayed name but leaves count unchanged. Each state variable is independent, and React batches updates before re-rendering. The execution table traces each step, showing state before and after updates and the rendered output. The variable tracker summarizes how count and name change over time. Key moments clarify why updating one state does not affect the other and why UI updates happen after re-render. The quiz tests understanding of state values at specific steps and how changes affect the component.