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.

Practice

1. What is a controlled component in React?

easy

A. A component that does not use state at all

B. A component that controls other components' rendering

C. A form input element whose value is controlled by React state

D. A component that uses refs to access DOM elements

Solution

1. Step 1: Understand controlled components

   Controlled components are form inputs whose values are managed by React state, not by the DOM alone.

2. Step 2: Identify the correct definition

   A form input element whose value is controlled by React state correctly describes this concept as React controlling the input value via state.

3. Final Answer:

   A form input element whose value is controlled by React state -> Option C

4. Quick Check:

   Controlled component = React state controls input value [OK]

Hint: Controlled means React state holds the input value [OK]

Common Mistakes:

• Confusing controlled with uncontrolled components
• Thinking refs control input value
• Assuming controlled means no state usage

2. Which of the following is the correct way to create a controlled input in React?

easy

A.

B.

C.

D.

Solution

1. Step 1: Check controlled input syntax

   A controlled input must have its value set from state and update state on change.

2. Step 2: Analyze options

   <input value={this.state.text} onChange={this.handleChange} /> uses value from state and onChange handler to update it, which is correct.

3. Final Answer:

   <input value={this.state.text} onChange={this.handleChange} /> -> Option A

4. Quick Check:

   Value + onChange = controlled input [OK]

Hint: Controlled input needs value and onChange props [OK]

Common Mistakes:

• Using defaultValue instead of value for controlled inputs
• Omitting onChange handler
• Not linking value to state

3. What will be the output when typing in this controlled input?

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

medium

A. The input updates and shows what the user types

B. The input stays empty and does not update

C. The input throws a runtime error

D. The input shows the initial empty string and ignores typing

Solution

1. Step 1: Understand the controlled input behavior

   The input's value is linked to state variable 'text'. The onChange updates 'text' with user input.

2. Step 2: Predict the input behavior

   As user types, onChange updates state, which updates value, so input shows typed characters.

3. Final Answer:

   The input updates and shows what the user types -> Option A

4. Quick Check:

   State updates input value = visible typing [OK]

Hint: State + onChange updates input value dynamically [OK]

Common Mistakes:

• Thinking input won't update without defaultValue
• Assuming input is uncontrolled without onChange
• Confusing initial state with input behavior

4. Identify the error in this controlled component code:

function Form() {
  const [name, setName] = React.useState('');
  return (
    <input value={name} onChange={e => setName} />
  );
}

medium

A. The useState hook is missing an initial value

B. The value prop should be defaultValue

C. The input element is missing a closing tag

D. The onChange handler does not call setName with the new value

Solution

1. Step 1: Check onChange handler usage

   The onChange handler is set to 'e => setName' which is a function reference, not a call with the new value.

2. Step 2: Correct onChange handler

   It should be 'e => setName(e.target.value)' to update state with input value.

3. Final Answer:

   The onChange handler does not call setName with the new value -> Option D

4. Quick Check:

   onChange must call setState with event value [OK]

Hint: onChange must call setState with event target value [OK]

Common Mistakes:

• Passing setName without calling it
• Using defaultValue instead of value in controlled input
• Forgetting to pass initial state to useState

5. You want to create a controlled textarea that converts all input to uppercase as the user types. Which code snippet correctly implements this?

hard

A. const [text, setText] = React.useState('');
return

B. const [text, setText] = React.useState('');
return

C. const [text, setText] = React.useState('');
return

D. const [text, setText] = React.useState('');
return

Solution

1. Step 1: Understand controlled textarea with uppercase transformation

   The textarea's value must come from state, and onChange must update state with uppercase input.

2. Step 2: Analyze each option

   const [text, setText] = React.useState(''); return <textarea value={text} onChange={e => setText(e.target.value.toUpperCase())} />; updates state with uppercase input on change and sets value from state, so textarea shows uppercase as typed.

3. Final Answer:

   const [text, setText] = React.useState(''); return <textarea value={text} onChange={e => setText(e.target.value.toUpperCase())} />; -> Option B

4. Quick Check:

   Update state with uppercase input onChange = uppercase textarea [OK]

Hint: Transform input in onChange before setting state [OK]

Common Mistakes:

• Transforming value prop instead of input value
• Using defaultValue in controlled component
• Not updating state with transformed input