1
ReactIntermediate#fundamentals#performance
ReactIntermediate#forms
What are controlled and uncontrolled components?
A controlled input keeps its value in React state and updates through onChange, giving you validation and single-source-of-truth. An uncontrolled input keeps the value in the DOM and is read via a ref.
Example
// controlled
<input value={name} onChange={e => setName(e.target.value)} />
// uncontrolled
<input ref={inputRef} defaultValue="Anu" />