Understanding Controlled and Uncontrolled Components In React.js
The HTML form element is a way we get user input into our React application which is one of the most used HTML elements. Since the introduction of React, the way forms have been handled has changed in many ways.
Every time you create a React component that renders a form element you are creating either a controlled or an uncontrolled component. Controlled and uncontrolled components are terms used to describe React components that render HTML form elements.
In this tutorial, we will discuss controlled and uncontrolled components. In our discussion, we will talk about their meaning/definition, practical use cases, and differences. Our goal is to have a better understanding of controlled and uncontrolled components after reading this article.
Controlled Component:
A controlled component is a react component that renders a form element whereby the form data is handled by the component itself and kept in a state. A controlled component will override the default DOM behavior of the HTML form elements.
A controlled component can be created by connecting the form element (<input/>, <textarea> or <select>) to the state by setting its attribute value and the event onChange.
Consider the following example of a controlled component:
Uncontrolled Component:
In uncontrolled components, the form data is handled by the DOM which is the default DOM behavior. To access the input’s DOM node and extract its value, you can use ‘ref’. Using ‘ref’ eliminates the need of writing an event handler for every state update.
Consider the following example of an uncontrolled component:
Controlled vs Uncontrolled:
Now, let’s consider the key differences between controlled and uncontrolled components.
- Controlled components are predictable because the state of the form element is handled by the component. While uncontrolled components are not predictable because the state of the form element is handled by the DOM itself.
2. In controlled components, the use of the component state is required. While, in uncontrolled components, the use of state is absolutely optional however, the use of Refs is a must.
3. In controlled components, you can easily validate form input data. While in an uncontrolled component, it’s difficult to validate form input data.
Now that we have learned the differences between the two components, the question is: which should you use in your React project? Our goal is not to judge which is better but which better serves your need. If your use case or personal preference affords you more control over your form data, definitely, you would want to use a controlled component.
Categorically, there are no defined rules to help you determine when and how to use controlled components versus uncontrolled components in React; it all depends on how much control you want to have over your inputs.
Conclusion:
In this article, we studied HTML form input element. Next, we mentioned two ways we could handle form elements with practical use cases. In the end, we took a deep dive into controlled and uncontrolled components highlighting their different behaviors. So, now, have you ever had to use the uncontrolled component? Please share your experience in the comment section below.
Happy hacking! 🥳 🥳 🥳 🥳 🥳 🥳
