Difference between Controlled and Uncontrolled Components
Controlled Component |
Uncontrolled Component |
|---|---|
| The component is under control of the component’s state. | Components are under the control of DOM. |
| These components are predictable as are controlled by the state of the component. | Are Uncontrolled because during the life cycle methods the data may loss |
| Internal state is not maintained | Internal state is maintained |
| It accepts the current value as props | We access the values using refs |
| Does not maintain its internal state. | Maintains its internal state. |
| Controlled by the parent component. | Controlled by the DOM itself. |
| Have better control on the form data and values | Has very limited control over form values and data |
Controlled vs Uncontrolled Components in ReactJS
In React, Controlled components refer to the components where the state and behaviors are controlled by Parent components while Uncontrolled components are the ones having control of their own state and manage the behaviors on themselves.
Table of Content
- Uncontrolled Components
- Controlled Components
- Difference between Controlled and Uncontrolled Components