React Controlled Vs. Uncontrolled Component
Controlled Component
A controlled component is linked to a value, and its changes are managed through event-based callbacks in the code. In this approach, React handles the input form element instead of the DOM. The mutable state is stored in the state property and can only be updated using the setState() method.
Controlled components have functions that manage the data passed to them whenever an onChange event occurs. This data is then stored in the state and updated using the setState() method. This approach gives the component greater control over the form elements and the data.
Uncontrolled Component
It is similar to traditional HTML form inputs, where the form data is managed by the DOM itself. The inputs maintain their own state and update when the value changes. To create an uncontrolled component, you don't need to write an event handler for every state update; instead, you can use a ref to access the form's value directly from the DOM.
Difference table between controlled and uncontrolled component
