Controlled vs Uncontrolled Components

Table Of Contents

1. Introduction
2. Definitions
3. Key Differences
4. Conclusion

Introduction
Recently, to aid in my learning journey, I decided to delicate some time to blog down learning points along the way. As I have recently started learning React, I am still unfamiliar with many definitions and concepts. So I gave myself an assignment today to find out:

What is the difference between controlled and uncontrolled components?

While building my personal projects, I was unclear why it is best practice to use controlled component over uncontrolled component bar from a few exceptions. Upon reading further, apparently, there are some performance and functional advantage for using a controlled component over an uncontrolled one.

Definition
What is a controlled component?
Let's take form data elements such as textbox or input as an example, a controlled component is a component which input element value is controlled by the component react state via useState hook or some global state management tool. By using the form element event handlers such as onChange or onClick, we can store input element value in the react state.

What is an uncontrolled component?
As you can guessed it, uncontrolled components are components which react state is not present. The component owns its own state. Think of it as traditional HTML input elements. The value of the input element is directly handled by the DOM and you can extract the value from the DOM by using the useRef hook and referencing it to the ref prop in the element.

Key Differences

• With controlled components, we are able to perform dynamic form validation even before we submit the forms. As the input values are stored in local storage, with the input element onChange prop, validation can be perform on every keystroke. Hence your data (state) and UI (inputs) are always in sync. However in uncontrolled component this is not possible as no state is being stored. Validation can only occur once the form is submitted.

• Uncontrolled components are easier to reuse with minimal setup. However you will not have control on how the data flows and only receive the data after the form is submitted. If your app doesn’t need to know the state of the component, you can consider using it. The typically use case would be setting the focus props in an input element.

Conclusion
So to conclude, you can decide whether you want to use controlled or uncontrolled component when creating a form in react. If you want the quick and easy way to create an input element, uncontrolled could be the way to go. However if you want more control on the data flow within a component to make use of certain functionalities such as instant validation, maybe consider using a controlled component instead. Also, referencing from React documents, it is recommended to use controlled component. One point to note, avoid creating a component which has the same input values being referenced on both controlled and uncontrolled properties as the input value does not reside in a single source of truth and your form may break.

If you want an easier way to implement forms in a react application, check out react hook forms. It is a great library for implementing intuitive forms for react applications.