What is the difference between a controlled component and an uncontrolled component?

• A controlled component is a component where React is in control and is the single source of truth for the form data.
• An uncontrolled component is where your form data is handled by the DOM, instead of inside your React component.

Though uncontrolled components are typically easier to implement since you just grab the value from the DOM using refs, it’s typically recommended that you favor controlled components over uncontrolled components. The main reasons for this are that controlled components support instant field validation, allow you to conditionally disable/enable buttons, enforce input formats, and are more “the React way”.