Controlled & Uncontrolled Components in React
Forms play an important role in the development of websites with React. Forms are used for data collection such as the user’s name, email id, password, and other personal information. There are two ways in which form inputs are handled in React, controlled and uncontrolled components.
What Are Controlled Components?
Controlled component means the input element which is controlled by the React state. React state stores the value of the input element and updates every time we enter any data into it.
For example:
import { useState } from "react";
function App() {
const [name, setName] = useState("");
return (
<div>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<p>Your name is: {name}</p>
</div>
);
}
export default App;
In this case, React makes use of the `name` state as the value of the input. Every time the user types anything on the input field, the `name` state gets updated using the `onChange` event.
Controlled Components Are Helpful For…
Input Data Validation, Real-Time Updating, Or Controlling The Behavior Of Form Elements
Uncontrolled Components—What Are They?
The values of the uncontrolled component are stored in the DOM rather than React state. For example:
import { useRef } from "react";
function App() {
const nameRef = useRef();
const handleSubmit = () => {
alert(nameRef.current.value);
};
return (
<div>
<input type="text" ref={nameRef} />
<button onClick={handleSubmit}>
Submit
</button>
</div>
);
}
export default App;
In this case, React doesn’t modify the state at each key press. Rather, the `useRef` hook lets us access the input element, and we get its value on the click of the button.
Uncontrolled components are good for simple forms where all we need is to get the value of the input when submitting the form.
Difference between Controlled and Uncontrolled Components
The major difference between the two is in how the input values are stored. While controlled components utilize React state, uncontrolled components depend on the DOM to hold their values.
Controlled components give more control in terms of validation and real-time changes, while uncontrolled components require less coding for simple forms.
Which Ones Should You Use?
Controlled components should be used to make registration forms, login forms, and search inputs.
Uncontrolled components should be used to create simple forms.
Conclusion
Both controlled and uncontrolled components find their place in the React development. Controlled components are usually recommended if there is a need for full control over the form's inputs, whereas uncontrolled components provide a more straightforward way to handle input information.
In any event, knowledge of both will prove quite beneficial.
Understanding both approaches allows you to select the proper technique depending on the requirements of your application and create more manageable forms.
Related Links:
Resume Tips For Software Developers
Do visit our channel to know more: SevenMentor
Author:
Sagar Kshirsagar
Sagar Kshirsagar
Expert trainer and consultant at SevenMentor with years of industry experience. Passionate about sharing knowledge and empowering the next generation of tech leaders.