First, let’s quickly go over what an uncontrolled component is and why it is advised to more often use controlled components over uncontrolled components.

Uncontrolled components are components that are NOT controlled by the React State. They are taken care of by the DOM (Document Object Model).

With the form data being handled by the DOM, when something is being typed into the input field, the data will be remembered by the DOM. This is considered “uncontrolled” because it relies on the DOM to manage the input data. Then when we want to have access to those data, a ref must be used, useRef(). Ref allows us to reference a DOM element or class component from within a parent component when the form is submitted but it doesn’t allow us to validate the inputs as we type.

If validation is not necessarily needed, then using uncontrolled components might be the easiest way to create forms. Though, it might not be the most preferable way for the sake of our users.

However, uncontrolled component does limit our control over the form elements and data.

This is where using the controlled component is proven to be more beneficial! The controlled component is handled by the component itself rather than the DOM, which allows us better control over the form elements and data.

When using controlled components, there is however one drawback. The number of states in a component increases with each controlled elements that are being added to the form element sometimes making it slightly harder to keep track of everything on the form.

What are controlled components?

A controlled component is referred to components that are controlled by using React state, useState(). In a controlled component, the parent components manages their own states and passes the new values as props.

For example, when populating forms the data are being handled by the components state. The changes with the data are then notified through callbacks such as the onChange and the onClick events.

In most cases, always use controlled components.

Why do we use controlled components?

So exactly why do we use controlled components and why are controlled components preferred over uncontrolled components?

For obvious reason, we want more control over our components. One example of when to use controlled components is when implementing forms. Using controlled components instead on uncontrolled components when implementing forms allows all the component states to be kept in the React state instead of having to solely rely on the DOM to retrieve elements value through internal states. With controlled components, when the state changes the components will programmatically re-render with the updated values. As you can imagine, this makes it undeniably easier to populate forms from the existing and available data.

How do we create controlled forms?

Controlled components are created by connecting the form elements to a state. We then set the attributes value to the state and to an event such as onChange or onClick.

In the below code, we are initiating state for a new name. This step allows us to use states to programmatically update the current state value with the updated value.

import { useState } from 'react';

function App() {
const [name, setName] = useState('');

return (
	<div>
	<h3>Controlled Component</h3>
	
		<label>Name:</label>
		 setName(e.target.value)} /&gt;
	
	</div>
);
}

export default App;

Then we tell the input field that when a new name is entered, a change must occur. We do this by using an onChange event.

Controlled components contains functions that manages the data passing into them when each onChange event occurs. The data is then saved to state and updated. That is how a controlled component works!