Make controlled component the only option?

Currently the only advantage I can think of, of using uncontrolled components, is for their lightweight syntax. But ReactLink made me wonder if there isn’t a better way.

Currently:

var Uncontrolled = React.createClass({
  render: function() {
    return <input type="text" defaultValue="hello" />;
  }
});

var Controlled = React.createClass({
  getInitialState: function() {
    return {text: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({text: event.target.value});
  },
  render: function() {
    return <input type="text" value={this.state. text} onChange={this.handleChange} />;
  }
});

My proposal: Keep controlled the same. Controlled with sugar:

var Controlled = React.createClass({
  render: function() {
    return <input type="text" value="hello" stateLink="text" />;
  }
});

I realize this is a bit of magic, but considering that currently we need to:

• Explain what defaultValue is and its reason for deviating from DOM.
• Provide an add-on (in another build) to have the benefits of uncontrolled components, which might seem a bit backward.
• Have value anyway.

I feel the pros outweigh the cons here. With the new format you still have two options very similar to controlled/uncontrolled, but with all the benefits of a controlled component.

[jedwards1211]

@Aweary nice, glad to hear it.

[aweary]

@jedwards1211 it should be noted that ReactLink is to be deprecated as of 15.0: https://github.com/facebook/react/pull/6085