Difference between Controlled and Uncontrolled component in ReactJs

Controlled Component

In the controlled component, the input of the form element is handled by the component rather than the DOM. Controlled components have the functions that govern the data, which passes to them on every onChange event. Here, the changeable (mutable) state is kept inside the state property and updated only with the setState() method.

Like an onChange event, the controlled component also takes its current value by props and notifies the changes by the callbacks.

Controlled components consist of the functions that govern the data, which passes into them on every onChange event. After that, this data will save into state and updated with the setState() method. It makes better control of the component over the elements and data of the forms.

Uncontrolled Component

Uncontrolled components are much similar to the traditional HTML form inputs. The DOM is itself responsible for handling the form data. Here, the elements of HTML maintain their state, which will update when the value of input changes. For writing an uncontrolled component, you have to use a ref to get form values from the DOM. In other words, it is not important to write an event handler for updating of every state.

Difference between Controlled and Uncontrolled Component

S.no.	Controlled Component	Uncontrolled Component
1	The parent component controls the data.	DOM itself controls the data.
2	There is a validation control.	There is not any validation control.
3	It provides better control over the elements and data of the form.	It provides limited control over the elements and data of the form.
4	It does not maintain the internal state.	It maintains the internal state.
5	It accepts the current value in the form of the prop.	It uses ref for the current values.