Controlled components in React - Step-by-Step Execution

Concept Flow - Controlled components

Render Component

↓

Input element value set from state

↓

User types in input

↓

onChange event triggers handler

↓

Handler updates state with new input

↓

Component re-renders with updated state

↩Back to Input element value set from state

The component renders an input whose value is controlled by React state. User input triggers an event that updates the state, causing re-render with new value.

Execution Sample

React

function ControlledInput() {
  const [text, setText] = React.useState('');
  return <input value={text} onChange={e => setText(e.target.value)} />;
}

A React component with an input field controlled by state, updating on user typing.

Execution Table

Step	Action	State Before	Event	State After	Rendered Input Value
1	Initial render	text = ''	none	text = ''	'' (empty)
2	User types 'H'	text = ''	onChange with 'H'	text = 'H'	'H'
3	User types 'e'	text = 'H'	onChange with 'He'	text = 'He'	'He'
4	User types 'l'	text = 'He'	onChange with 'Hel'	text = 'Hel'	'Hel'
5	User types 'l'	text = 'Hel'	onChange with 'Hell'	text = 'Hell'	'Hell'
6	User types 'o'	text = 'Hell'	onChange with 'Hello'	text = 'Hello'	'Hello'
7	No more input	text = 'Hello'	none	text = 'Hello'	'Hello'

💡 User stops typing; state remains stable with final input value.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	After 6	Final
text	''	''	'H'	'He'	'Hel'	'Hell'	'Hello'	'Hello'

Key Moments - 3 Insights

Why does the input value not change unless state updates?

Because the input's value is set from the state variable 'text'. Only when 'text' changes on onChange does the input update, as shown in steps 2-6.

What happens if we remove the onChange handler?

The input becomes read-only because its value is controlled by state but state never updates, so the input stays stuck at the initial value (step 1).

Why do we need to call setText inside onChange?

Calling setText updates the state with the new input value, triggering a re-render that updates the input's displayed value, as seen from step 2 onward.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'text' after step 4?

A 'He'

B 'Hel'

C 'Hell'

D 'Hello'

💡 Hint

Check the 'State After' column at step 4 in the execution table.

At which step does the input value first become 'Hello'?

A Step 7

B Step 5

C Step 6

D Step 4

💡 Hint

Look at the 'Rendered Input Value' column to find when 'Hello' appears.

If the onChange handler did not call setText, what would happen to the input value?

A It would stay empty and never change

B It would update normally as user types

C It would show the last typed character only

D It would cause an error

💡 Hint

Refer to the key moment about removing the onChange handler.

Concept Snapshot

Controlled Components in React:
- Input value is set from state.
- onChange updates state with user input.
- State change triggers re-render.
- Input reflects latest state value.
- Without onChange, input is read-only.

Full Transcript

This visual trace shows how a controlled component in React works. Initially, the input value is empty because the state variable 'text' is empty. When the user types a character, the onChange event fires, calling setText with the new input value. This updates the state, causing React to re-render the component with the updated 'text'. The input's value attribute reflects this new state, so the displayed text updates. This cycle repeats for each character typed. If the onChange handler is missing, the input value never changes because the state never updates, making the input read-only. Controlled components keep React state as the single source of truth for form inputs.