An uncontrolled component is a form element where the DOM itself is responsible for managing its state. React does not control the value of the input directly. Instead, the DOM keeps track of it, and you can access the value only when needed.

In an uncontrolled component, you typically use the ref attribute to interact with the DOM directly, allowing you to retrieve the input value at a later point (for example, when the form is submitted).

Key Characteristics of Uncontrolled Components

• DOM-managed state: The form element’s state is managed by the DOM, not React.
• Access via refs: You can access the value of the input using React.createRef() or useRef() in functional components.
• No re-rendering: Since React doesn’t manage the input’s value, there is no need for a re-render when the input value changes.

Example

Let's look at an example of an uncontrolled form element:

import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef(null); // Create a ref to access the input

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Entered value: ${inputRef.current.value}`); // Access the input value using the ref
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={inputRef} /> {/* No value or onChange */}
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default UncontrolledForm;

In the example above:

• The input field is uncontrolled because it doesn’t have a value prop or onChange handler.
• The ref is used to access the current value of the input field when the form is submitted.
• React does not manage the state of the input, so there are no re-renders when the user types in the field.

Advantages of Uncontrolled Components

Uncontrolled elements offer several benefits, including:

• Less Code: Uncontrolled components require fewer props and event handlers, resulting in reduced boilerplate code. The browser manages the input’s state internally, eliminating the need to manually synchronize state with the input value.

• Better Performance: Since uncontrolled components do not rely on React state updates for every keystroke or change, the component avoids frequent re-renders. This can make uncontrolled components more performant, particularly for large forms or applications with many input fields.

• Simpler Implementation: Uncontrolled components are easier to use for straightforward forms where you don’t need to track or manipulate the input data in real time. They are ideal for cases where you only need to retrieve form values on submission, rather than during every interaction.

Disadvantages of Uncontrolled Components

There are a few drawbacks to using uncontrolled components namely:

• Less predictable: Since React doesn’t control the state, it can be harder to track the value and manage updates, leading to potential inconsistencies.
• Limited flexibility: They don't provide as many options for real-time form validation or conditional rendering.
• Harder to integrate: If you need to integrate form values with other React components or business logic, it can be more difficult to manage in uncontrolled components.

In conclusion, uncontrolled components simplify form handling by reducing boilerplate code and improving performance for large forms. They are a great choice for simple use cases where real-time state tracking isn't required.