Controlled Vs Uncontrolled
Controlled Component:
Unlike the uncontrolled component, the input form element in the controlled component is handled by the component rather than the DOM. It takes its current value through props. The changes are notified through callbacks.
Uncontrolled component:
Similar to the traditional HTML form inputs, the uncontrolled component can be written using a ref to get form values from the DOM. Thus there is no need to write an event handler for every state update and the HTML elements maintain their own state that will be updated when the input value changes.
| CONTROLLED COMPONENT | UNCONTROLLED COMPONENT |
| Does not maintain its internal state. | Maintains its internal state. |
| Data is controlled by the parent component. | Data is controlled by the DOM itself. |
| Accepts its current value as a prop. | Uses a ref for their current values. |
| Allows validation control. | Does not allow validation control. |
| Better control over the form elements and data. | Limited control over the form elements and data. |