React - Controlled vs Uncontrolled Components

Components are the main feature of React. Controlled and Uncontrolled components are the only component types that react supports.

In React doc it is stated that we should use controlled components to implement forms in most cases. React component handles form data in the controlled components. On the other hand, form data is handled by the DOM it self in uncontrolled component.

Let’s deep dive into these two type of components.

Controlled Components

In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().

By making the React state the “single source of truth,” we can combine the two. The React component that renders a form then has control over what happens in that form when the user enters input. A “controlled component” is an input form element whose value is managed by React in this way.

Let’s look at a code example below.

The state object is created on line 4 of the code for this component. It holds a single property called message. This is where the value that is entered into the textbox is stored.

In order to store the value, when the user types in the textbox we need an event to be triggered. If you look at line 24, you can see the facts that the textbox has a value attribute bound to the message property in the state and we have an onChange event handler declared. These 2 facts indicates that this is a controlled component.

After a change on the input element the handler is triggered. The handler calls setstate() as it is seen on line 11. This updates the state accordingly.

With a controlled component, the input’s value is always driven by the React state. While you’ll have to put a little more code as a result, you’ll be able to pass the value to other UI elements and reset it from other event handlers.

Uncontrolled Components

Instead of writing an event handler for every state update, you can use a ref to get form values from the DOM to write an uncontrolled component.

Uncontrolled components act more like traditional HTML form elements. The data for each input element is stored in the DOM, not in the component. Instead of writing an event handler for every state update, you can use a ref to get form values from the DOM to write an uncontrolled component.

For example, this code accepts a single name in an uncontrolled component:

Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty.

When to use controlled components and when to use uncontrolled components

The advantages of both the controlled and uncontrolled form fields cannot be overstated. Evaluate your specific situation and choose an approach based on what works best for you.

Uncontrolled with refs is perfectly ok if your form is really simple in terms of UI feedback. You are not required to listen to what the various articles claim to be “bad.”

If instant field validation, conditionally disabling submit button, enforcing input format, several inputs for one piece of data or dynamic inputs are required controlled inputs should be used. Otherwise, It is totally your decision to use controlled or uncontrolled component.