What are uncontrolled components?

The Uncontrolled components are form elements (like

<input>

<textarea>

<select>

ref

The uncontrolled components will be implemented using the below steps,

1. Create a ref using

   useRef

   react hook in function component or

   React.createRef()

   in class based component.
2. Attach this

   ref

   to the form element.
3. The form element value can be accessed directly through

   ref

   in event handlers or

   componentDidMount

   for class components

In the below UserProfile component, the

username

import React, { useRef } from "react";

function UserProfile() {
  const usernameRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("The submitted username is: " + usernameRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input type="text" ref={usernameRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

Note: Here, DOM is in charge of the value. React only accesses the value when needed (via

ref

Benefits:

• Less boilerplate — no need for

  useState

  and

  onChange

  .
• Useful for quick form setups or when integrating with non-React code.
• Slightly better performance in very large forms (fewer re-renders).

In most cases, it's recommend to use controlled components to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.

class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert("A name was submitted: " + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          {"Name:"}
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}