Controlled and Uncontrolled components in React
Controlled components
The controlled component is when you handle form by using state and onChange function to change the input value. DOM doesn’t handle the element, instead, it is handled by React.
As you can see from the below example, the state will be changed to something when the user types characters. It means the controlled component allows the user to updates the internal state.
Uncontrolled components
The uncontrolled component is similar to the traditional HTML form inputs. This means you cannot change the value of the form itself. DOM handles the input value itself. The way you can retrieve value is useRef.
How do they differ?
The internal state remains the same for the controlled component, but changes with the uncontrolled component. In addition, the controlled component allows validation control while the uncontrolled component does not. Form elements and data are also better control with the controlled component, while the uncontrolled component has a reduced level of control.
Resources
