Month: May 2019

Controlled vs Uncontrolled Components

In this post we’re going to discuss Controlled and Uncontrolled components in React.

Controlled

A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component “controls” it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a “dumb component”.

// Controlled
class Form extends Component {
  constructor() {
    super();
    this.state = {
      name: '',
    };
  }

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

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.name}
          onChange={this.handleNameChange}
        />
      </div>
    );
  }
}

Uncontrolled

A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

// Uncontrolled
class Form extends Component {
  handleSubmitClick = () => {
    const name = this._name.value;
    // do something with `name`
  }

  render() {
    return (
      <div>
        <input type="text" ref={input => this._name = input} />
        <button onClick={this.handleSubmitClick}>Sign up</button>
      </div>
    );
  }
}

In most cases you should use controlled components but that doesn’t mean you should use them all the time, like if:

  • Your form is very simple and doesn’t need any instant validation?
  • Even if any validations are needed, they are done only when the form is submitted?
  • Values need to be retrieved only on “submit”. No fields are dependent on any other field(s)?

References