What are Controlled and Uncontrolled Components in React JS? Which one to use? React JS Learning Series #1

If you have been using ReactJs for some time then you must have seen some warnings about uncontrolled components and went back to handle those using states. In this article, we will be learning everything about these controlled and uncontrolled components in React.

Before diving right into the details, Did you know that Brands using Progressive Web Applications (PWAs) notice that page views increase by nearly 134%? Also, the average bounce rate of a PWA is 42.86% lower than a similar mobile website! Crazy Stats right? Read More about Progressive Web Applications here.

10X Your Productivity With the Best Home Office Desk Accessories in India

What are Controlled and Uncontrolled Components in React JS?

p.s. When we talk about Controlled and Uncontrolled Components, it’s always referring to components which are handling forms or form inputs in them.

So in ReactJS every action or engagement a user does is entangled with an event that we handle while writing the components. Now for the HTML Form Elements, the user interactions or changes can be captured in two different approaches in React —

No Simpler Analogy than this is there for Managing Form Elements in a Web Application

Controlled Components

As the name says, in the controlled component the form input element’s values and mutations are totally driven by event handlers and the value of the input element is always inferred from the state. Here’s a flow diagram of a controlled component —

The flow of a Controlled Component in ReactJS

Example

Here’s a working code of a controlled component where we have a text input.

Let’s understand the two most important aspects of controlled components from this example —

1. The text input has the value attribute set as the components state ‘text’. This is very important so that the input component’s value will always be in sync with the components state ‘text’ s value.
2. Secondly, we are handling the change event emitted by the input element whenever a user tries to update the input element's value. Inside the handler function, we are mutating the ‘text ’state with the updated input value.

Now as the state is changed that calls for re-render of the input element with the updated value. Thus the user-made changes will reflect on the UI as well.

Quick Tip: If you need to update a view with the change of an input ( e.g. lookahead search feature) then using a controlled input will save a lot of time and will ensure a cleaner code.

Uncontrolled Components

If you have gone through the above points and examples of the controlled component then you have already guessed how uncontrolled components work. Yes, they don’t use any states on input elements or any event handler. This type of component doesn’t care about an input element’s real-time value changes.

You might be wondering now, then how would we get the input element’s value?

Well, that’s where Refs comes to the rescue. For the uninitiated, Refs in React ecosystem works like pointers that give access to DOM nodes. In the uncontrolled components, we use Refs to access the values of input elements.

The flow of an Uncontrolled Component in ReactJS

Example

Here’s a working code of an uncontrolled component where we are using an input of type date —

If you see in the above example, no state is managed for the value of the input value. Also, we aren't using any change event handler. Rather we are using a special statement in the constructor,

this.inputRef = React.createRef();

The above statement creates a React Ref object which will be used to get access to the DOM node for the input element. To specify inputRef as the Ref for the input element we have provided that as an attribute value in the input element definition in the jsx,

ref={this.inputRef}

By doing so we are letting the ref have access to the input element node. Thereafter, in the form submit handler we can easily access the input’s value by accessing the current value of the ref like below —

this.inputRef.current.value

Quick Tip: If you have a input element in a functional component or there’s a very less number of input elements are present in a form which doesn’t need to be updated or validated or synced with state with every change then using uncontrolled component could save you some code.

Why they are required?

Unlike other MVC frameworks, React inclines more towards a View Library. That’s why React is more flexible as well as opinionated and provides both a model-view approach with controlled components and an only view approach using uncontrolled components. While other frameworks like Angular or VueJs provide only Model-View two-way binding approach to the same use case, React provides two distinctively flexible solutions. It depends on the use cases about how and where one would use any of those.

✅ Also checkout, Top 20+ Must-Have Modern Desk Accessories to get in India

What are the differences between Controlled and Uncontrolled Components in React JS?

• In a controlled component, form data is handled by a React component. Whereas in uncontrolled components, form data is handled by the DOM itself.
• Usage of Component State is a must for controlled components. Use of state is completely optional for uncontrolled components, but one must use Refs in it.
• With controlled components, we can validate as the input is being changed but the same is not possible with uncontrolled components.

Which one should we use?

It totally depends on your use case as mentioned before. If you are using a large application where all the input components are already created as common components in order to maintain uniformity across apps, then it’s better to use them as controlled components as that will enable them to be used without passing the refs.

Similarly, if the component is being used in a relatively smaller project with direct HTML form elements implementation inside the render function and you don’t require the run time change events to do any actions, then it’s much easier to manage using uncontrolled components.

With that note, my article ends here. If you have learned something new then don’t forget to hit the clap button, and share the article with your fellow dev friends. Also, I’m planning to add interesting stuff to this React JS Learning Series in the upcoming days. For any kind of questions/clarity for this article or if you want me to cover any particular topic then please let me know in the comments.