Common React Mistake: Derivative State

common_react_mistake.jsx

var MyClassProps = React.createComponent({
  propTypes: {
    email: React.PropTypes.string
  },

  shouldComponentUpdate: function(nextProps) {
    return this.props.email !== nextProps.email;
  },

  render: function() {
    var email = this.props.email;
    var userDomainParts = email.split('@');

    return (
      <span className="email">
        <span className="user">{userDomainParts[0]}</span>
        <span className="at">@</span>
        <span className="domain">{userDomainParts[1]}</span>
      </span>
    );
  }
});

var MyClassState = React.createComponent({
  propTypes: {
    email: React.PropTypes.string
  },

  getInitialState: function() {
    return {email: this.props.email};
  },

  componentWillReceiveProps: function(nextProps) {
    if (this.props.email !== nextProps.email) {
      this.setState({email: this.props.email.split('@')});
    }
  },

  render: function() {
    var userDomainParts = this.sate.email;

    return (
      <span className="email">
        <span className="user">{userDomainParts[0]}</span>
        <span className="at">@</span>
        <span className="domain">{userDomainParts[1]}</span>
      </span>
    );
  }
});