← React Beginner Questions - Set 9 Q89

What is the difference between an uncontrolled and controlled component?

React Beginner Questions - Set 9

Example

1
2

<input value={name} onChange={e => setName(e.target.value)} />   {/* controlled */}
<input defaultValue="Ana" ref={nameRef} />                        {/* uncontrolled */}

What to notice

• Controlled = React owns the value; uncontrolled = the DOM does and you read it on demand.