Why are Controlled & Uncontrolled Components in React confusing?

and what are they?

Inputs are common in the world of React. You may have come across “Controlled” and “Uncontrolled” terms, looked them up, and still are not completely sure what they mean. No worries! I’m going to go over them as well as attempt to explain why they can be confusing.

Let’s start with the definition of an uncontrolled input;

Uncontrolled Component

An uncontrolled component is a component that does not manage the base input’s value.

This is the default behavior for the HTML input tag. You provide an onChange function to listen to changes and that is it. You make no other changes to the value of the input and accept it as is.

But what if we want more features?…

Let’s say you want to make a hashtag input that only accepts hashtags. We’d want to include a few rules to make user input less error prone.

• No spaces
• Starts with ‘#’
• No special character input

Suddenly the default HTML input tag no longer fits our use case. We need to take control of the value by managing some state and run some validation on every key stroke. We do this by again using the onChange function to listen to what the user is inputting but this time, run our validation function, do any string manipulation, and pass the resulting value back into the input. This resulting input is a…

Controlled Component

A controlled component is a component that manages the base input’s value.

Why is it confusing?

Notice I use the word “base” in both of my definitions. The reason being is because the idea of a controlled or uncontrolled component is only applicable to within it’s own context.

Let’s say you want to apply some styling and refactor the new HashtagInput so it can be used elsewhere. You give it an onChange callback prop that notifies whenever a new hashtag has been enterred. From the context of the parent that is using HashtagInput, it is an uncontrolled component. This is because the parent does not manipulate the value of the child component, it is only listening to it. However within the context of the HashtagInput it’s base input tag is still a controlled component.

That is it! In the future, I’ll walk through the process of implementing a HashtagInput.