ReactJS Controlled vs Uncontrolled

Heading h1

ReactJS Controlled vs Uncontrolled

Syntax

Controlled

class ControlledComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  }

  handleSubmit = (event) => {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

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

Uncontrolled

function UncontrolledComp() {
  let inputRef = useRef(null);

  const handleSubmit = (event) => {
    alert('A name was submitted: ' + inputRef.current.value);
    event.preventDefault();
  }

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

Example

Controlled

class ControlledExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  }

  handleSubmit = (event) => {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

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

Uncontrolled

function UncontrolledExample() {
  let inputRef = useRef(null);

  const handleSubmit = (event) => {
    alert('A name was submitted: ' + inputRef.current.value);
    event.preventDefault();
  }

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

Output

When the "Submit" button is clicked, an alert is displayed with the value of the input field. For both examples, the alert displays the value of the input field.

Controlled

Same as Uncontrolled

Uncontrolled

Same as Controlled

Explanation

React provides two approaches to handle form inputs: controlled and uncontrolled. In a controlled approach, the value of the form element is controlled by the React component. The component keeps the value in its state and updates it whenever the input changes. In an uncontrolled approach, the value of the form element is not controlled by the React component. The component instead uses a reference to the input element to get the value when needed.

Use

You should use the controlled approach when you need to validate and manipulate the user's input before sending it to the server. This way, the input can't be modified by the user before submitting it. You should use the uncontrolled approach when you don't need to validate or manipulate the user's input. This approach is less verbose and easier to implement.

Important Points

• In a controlled approach, the value of the form element is controlled by the React component.
• In an uncontrolled approach, the value of the form element is not controlled by the React component.
• Use the controlled approach when you need to validate and manipulate the user's input before sending it to the server.
• Use the uncontrolled approach when you don't need to validate or manipulate the user's input.

Summary

React provides two approaches to handle form inputs: controlled and uncontrolled. In the controlled approach, the value of the form element is controlled by the React component. In the uncontrolled approach, the value of the form element is not controlled by the React component. Use the controlled approach when you need to validate and manipulate the user's input before sending it to the server, and use the uncontrolled approach when you don't need to validate or manipulate the user's input.