| A controlled component is one that is bound to a value, and the changes inside it will be handled in code by using event-based callbacks. |
This is similar to the traditional HTML form inputs, but, here, the form data is handled by the DOM itself. |
| It does not maintain its internal state. |
It maintains its internal states. |
| Data is controlled by the parent component. |
Here, the data is controlled by the DOM itself. |
| It accepts the current value as a prop. |
A ref is used for their current values. |
| Has much efficient control over the form elements and data. |
Has less control over the form elements and the data. |