React is developed by Meta, formerly known as Facebook. It is a free and open-source front-end JavaScript library for building user interfaces based on UI components. A component is an independent, reusable bit of code which divides the UI into smaller pieces.
In React applications, the html form element is one of the most often used HTML elements to get user input. Since react was introduced, there has been a change in how form data is handled on the web. React supports two ways to handle the form data; it can be either a controlled component or an uncontrolled component.
| Controlled Component | Uncontrolled Component |
|---|---|
| Controlled component is a component that is controlled by React state. | Uncontrolled component is a component that maintains its own internal state. |
| In a controlled component, form data is handled by a React component. | In an uncontrolled component, form data is handled by the DOM itself. |
| In a controlled component, you can easily perform instant field validation. | Field validation is not an easy task in an uncontrolled component. |
| In a controlled component, you can conditionally disable the submit button. | In an uncontrolled component, you cannot disable the submit button conditionally. |
| In a controlled component, parent component updates state on user reaction. | In an uncontrolled component, the component updates its own internal state on user interaction. |
| Controlled component stores the current value in the form of props. | Uncontrolled component stores the current value using react ref. |
| In a controlled component, you can enforce a specific input format for certain fields. | In an uncontrolled component, you cannot enforce input format for the fields. Because the input value is only available when the form is submitted by the user. |
| Controlled component uses react state to handle the dynamic form data. | In uncontrolled component, it is unable to handle the dynamic form data. |
| Controlled component has better control over the form data. | In uncontrolled component has limited control over the form data. |
Thanks for reading!
If you like our content, please do not forget to subscribe our channel.
