🌱 Controlled and uncontrolled form inputs in React don't have to be complicated
Uncontrolled inputs are like traditional HTML form inputs, you have to pull the value from the ref
when you need it
Controlled inputs are more the React way and uses value
and onChange
and you have to store the value in state somewhere.
feature | uncontrolled | controlled |
---|---|---|
one-time value retrieval (e.g. on submit) | ✅ | ✅ |
validating on submit | ✅ | ✅ |
instant field validation | ❌ | ✅ |
conditionally disabling submit button | ❌ | ✅ |
enforcing input format | ❌ | ✅ |
several inputs for one piece of data | ❌ | ✅ |
dynamic inputs | ❌ | ✅ |