← React Intermediate Questions - Set 2 Q19

What are controlled and uncontrolled components in React?

React Intermediate Questions - Set 2

Example

1
2

<input value={v} onChange={e => setV(e.target.value)} />   {/* controlled */}
<input ref={r} defaultValue={v} />                        {/* uncontrolled */}

What to notice

• Controlled for validation and conditional UI; uncontrolled for file inputs and speed.