Introduction
Uncontrolled components in React are ones for which the DOM(Document Object Model) handles the form data. The term "uncontrolled" points out the fact that React state has no control over these components.
The DOM has typically controlled and saved the values of form elements. To get the values from the DOM, we'll need to refer to the form elements' instance.
Also See, Dropdown in React JS, Hooks in React JS
What is an uncontrolled component?
Uncontrolled components in React are the one that does not use an internal state to connect to the HTML elements that are included in it.
Instead, you'll obtain a direct reference to the HTML element in question, which you can utilize as you like. Consider an uncontrolled component to be a low-level component, similar to vanilla JavaScript(JS).
It is sometimes easier to mix React with non-React code when using uncontrolled components because the source of truth is kept in the DOM. If you want to be quick and dirty, it can also be somewhat less code. Otherwise, controlled components should be used.
Let us take the following example for uncontrolled components:-
import React, { useRef } from "react";
const UncontrolledComp = () => {
const inputRef = useRef(null);
const handleSubmit = (e) => {
console.log(inputRef.current.value);
e.preventDefault();
};
return (
<form>
<input type="text" ref={inputRef} />
<button onClick={handleSubmit}>Submit Here!</button>
</form>
);
};
export default UncontrolledComp;
Output
We have a form with an input and a button in the above example. If we wish to refer to a DOM element in React, we can use the useRef hook. The useRef hook creates an object with a current property that contains the value. To get access to the value, we can set this reference to an element.
In other words, we'll utilize the useRef hook to construct a reference.
const inputRef = useRef(null);
Then we'll provide the reference to the <input> element.
<input type="text" ref={inputRef} />
When we submit the form, we can use the inputRef.current.value to get the value of the input.
Because React does not control the value of the input, it is termed an uncontrolled component. The element stores the value of the input internally. The value is directly retrieved from the <input> element.
React has several advantages, one of which is a higher level of abstraction from the DOM API (Application Programming Interface). So why would the framework allow you to construct uncontrollable components that go against everything it was built to do? The aim is simple: to make it easier for developers to integrate React with other libraries. By giving access to the most basic API, we'll be able to communicate in a universal language (sort of speaking) that will be understood by any other JS-based browser library.
Why not uncontrolled components?
The truth is that controlled components should be used as much as feasible. That's what the official React documentation suggests, and it's also the simplest method to create reusable components. Working with React's higher abstraction layer allows you to focus on your actual business logic without having to worry about the DOM API's internal workings. This method works for writing the program itself and the unit tests that go with it, and it even reduces the cognitive burden necessary to analyze your code mentally.
However, their use is not recommended when writing a regular React application. If you're working on something else, such as interacting with other libraries that don't follow React's design pattern, relying on a lower-level layer, such as the DOM API, will help you speak the same language as afterwall, Vue, Reat, Angular, and any other front-end framework.
Yes, there is a genuine use case for uncontrolled components in React, and yes, adding them to your project will make it more challenging to test and maintain, but you have the option, which is the benefit of using React.
129+ registered 
