Why does react function in ReactClass get called repeatedly on form input change events

Question

I have a react-bootstrap React Class, where the createList function gets called on every key input to either of the form inputs (workDone, or hoursAndMinutes). I'm new to reactjs, and perhaps this is normal behavior, but it seems to me that it isn't, and hence I'm doing something wrong.

var SubjectBox = React.createClass({
  getInitialState(){
    return({
      totalHoursAndMinute:0,
      subject:'',
      workDone:'',
      hoursAndMinutes:'',

    })
  },
  dropDownSelected:function(e){
    this.setState({subject:e.target.value})
  },
  handleChangeToWorkDone(){
    let s = this.refs.workDone.getValue();
    console.log(s);
    this.setState({
      workDone: s
    });
  },
  validateWorkDone:function(){
    let length = this.state.workDone.length;
    if (length >= 10) return 'success';
    else if (length > 5) return 'warning';
    else if (length > 0) return 'error';
  },
  validateHoursAndMinutes(){
    let hm = this.state.hoursAndMinutes.split(':');
    if (hm.length === 2){
      return 'success';
    }else{
      return 'error';
    }
  },
  handleChangeToHoursMinute(){
    var minutes =0;
    let s =this.refs.hoursAndMinutes.getValue();
    let hm =  s.split(':');
    if (hm.length===2){
      var h = parseInt(hm[0].trim());
      var m = parseInt(hm[1].trim());
      if (!m.isNaN){
        var minutes = h*60+m;
      }
    }
    this.setState({
      hoursAndMinutes: s,
      totalMinutes:minutes
    });
  },
  createList: function(){
    console.log("create list function.");
    var list=[];
    for (var i = 0; i < this.props.subjects.length;i++){
      list.push(<option key={i} value={this.props.subjects[i].subject}>{this.props.subjects[i].subject}</option>)
    }
    return list;
  },
  handleSubmit: function(e){
    e.preventDefault();
    console.log(this.state.workDone);
    console.log(this.state.subject);
  },
  render(){
    return(

        <form onSubmit={this.handleSubmit}>
          <Input ref="subjectList" type="select" label="Subject" onChange={this.dropDownSelected}>
            {this.createList()}
          </Input>
          <Input ref="workDone"
            type="text"
            value={this.state.workDone}
            placeholder="What did you do?"
            label="What did you do" help="Input is 10 or more characters."
            bsStyle={this.validateWorkDone()}  hasFeedback
            groupClassName="group-class" labelClassName="label-class"
            onChange={this.handleChangeToWorkDone} />
          <Input ref="hoursAndMinutes"
            type="text" value={this.state.hoursAndMinutes}  placeholder="HH:MM?"
            label="How long did you do it?"  help="Input in hours:minutes, example 1:5 = an hour and five minutes."
            bsStyle={this.validateHoursAndMinutes()}  hasFeedback
            groupClassName="group-class"
            labelClassName="label-class"   onChange={this.handleChangeToHoursMinute} />
          <Button type="submit" bsStyle="success">Submit</Button>
        </form>

    )
  }
});

Answer 1

It happens because you are using in handleChangeToWorkDone and handleChangeToWorkDone setState which calls re-render

setState() will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate(). If mutable objects are being used and the logic cannot be implemented in shouldComponentUpdate(), calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders.