title: React slow with multiple controlled text inputs
body: <p>I have a form with multiple text inputs. I have them all set up as controlled inputs. When typing, there is a lag of up to several seconds for the new text to display in the field. Here is an example field:</p>
  
  <pre><code>&lt;label&gt;Event Name&lt;/label&gt;
  &lt;input type="text" 
         placeholder="Title"
         className="form-control"
         name="title"
         value={this.state.event.title}
         onChange={this.handleChange} /&gt;
  </code></pre>
  
  <p>I can't figure out what's causing it to be so slow or what to do to fix it.</p>
  
  <p>UPDATED: Here's the component, should be enough to show what's going on.</p>
  
  <pre><code>let CreateEventForm = React.createClass({
    submit: function () {},
    handleChange: function(e){
      let value = e.target.value;
      let name = e.target.name;
      if(value === 'true'){
        value = true;
      }
      if(value === 'false'){
        value = false;
      }
      // If true/false toggle old
      let oldState = this.state.event[name];
      if(typeof oldState === 'boolean'){
        value = !oldState;
      }
      // If is array
      if(name.indexOf('[]') &gt; -1){
        name = name.replace('[]', '');
        oldState = this.state.event[name];
        var pos = oldState.indexOf(value);
        if(pos &gt; -1){
          oldState.splice(pos, 1);
        } else {
          oldState.push(value);
        }
        value = oldState;
      }
      let event = this.state.event;
      event[name] = value;
      this.setState({event: event});
      console.log(this.state.event);
    },
    getClasses(field, additionalClasses = []) {
      // If a string is passed for additional class, make array
      if(!Array.isArray(additionalClasses)){
        additionalClasses = [additionalClasses];
      }
      let useDefaultColumns = additionalClasses.filter(function(className){
          return className.indexOf('col-') &gt; -1;
        }).length === 0;
      let hasError = function(){
        let fields = Array.isArray(field) ? field : [field];
        return fields.filter(function(field){
            return !this.props.isValid(field);
          }.bind(this)).length &gt; 0;
      }.bind(this)();
      return classnames({
        'col-sm-4': useDefaultColumns,
        'form-group': true,
        'has-error': hasError
      }, additionalClasses);
    },
    render: function () {
      return (
        &lt;form ref="eventForm" onSubmit={this.submit}&gt;
          &lt;SavedModal isOpen={this.state.saved} reset={this.resetForm} style={this.state.modals.styles} /&gt;
          &lt;h3&gt;Info&lt;/h3&gt;
  
          &lt;div className="row"&gt;
            &lt;div className={this.getClasses('title')}&gt;
              &lt;label&gt;Event Name&lt;/label&gt;
              &lt;input type="text" placeholder="Title"
                     className="form-control"
                     name="title"
                     value={this.state.event.title}
                     onChange={this.handleChange} /&gt;
              {this.renderHelpText(this.props.getValidationMessages('title'))}
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="row"&gt;
            &lt;div className={this.getClasses('type')}&gt;
              &lt;label&gt;Event Type&lt;/label&gt;
              &lt;select name="type"
                      className="form-control"
                      value={this.state.event.type}
                      onChange={this.handleChange}
                      onBlur={this.props.handleValidation('type')}&gt;
                &lt;option value=""&gt;Select Event Type&amp;hellip;&lt;/option&gt;
                {this.state.calendarTypes.map(function (type, key) {
                  return &lt;option value={type.name} key={key}&gt;{type.name}&lt;/option&gt;
                })}
              &lt;/select&gt;
              {this.renderHelpText(this.props.getValidationMessages('type'))}
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;h3&gt;Duration&lt;/h3&gt;
  
          &lt;div className="row"&gt;
            &lt;div className="form-group col-sm-2"&gt;
              &lt;input type="checkbox" name="allDay" checked={this.state.event.allDay} onChange={this.handleChange}/&gt; All Day
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="row"&gt;
            &lt;div className="form-group col-sm-2"&gt;
              &lt;input type="checkbox" name="repeats" checked={this.state.event.repeats} onChange={this.handleChange}/&gt; Repeats&amp;hellip;
            &lt;/div&gt;
            &lt;br/&gt;&lt;br/&gt;
          &lt;/div&gt;
  
          &lt;h3&gt;Location&lt;/h3&gt;
          &lt;div className="row"&gt;
            &lt;div className={this.getClasses('location')}&gt;
              &lt;select name="location"
                      className="form-control"
                      value={this.state.event.location}
                      onBlur={this.props.handleValidation('location')}
                      onChange={this.handleChange}&gt;
                &lt;option value=""&gt;Select a Location&amp;hellip;&lt;/option&gt;
                {this.state.locations.map(function (location, key) {
                  return (
                    &lt;option value={location.name} key={key}&gt;{location.name}&lt;/option&gt;
                  );
                })}
              &lt;/select&gt;
              {this.renderHelpText(this.props.getValidationMessages('location'))}
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;h3&gt;Description&lt;/h3&gt;
          &lt;div className="row"&gt;
            &lt;div className={this.getClasses('description')}&gt;
              &lt;label&gt;Write a description:&lt;/label&gt;
              &lt;textarea className="form-control"
                        name="description"
                        value={this.state.event.description}
                        onChange={this.handleChange}
                        onBlur={this.props.handleValidation('description')}
                        rows="10"&gt;&lt;/textarea&gt;
              {this.renderHelpText(this.props.getValidationMessages('description'))}
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;h3&gt;Event Details&lt;/h3&gt;
          &lt;div className="row"&gt;
            &lt;div className={this.getClasses('fee')}&gt;
              &lt;label&gt;Fee:&lt;/label&gt;
              &lt;input type="text"
                     className="form-control"
                     name="fee"
                     value={this.state.event.fee}
                     onChange={this.handleChange}
                     onBlur={this.props.handleValidation('fee')}/&gt;
              {this.renderHelpText(this.props.getValidationMessages('fee'))}
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div className="row"&gt;
            &lt;div className="col-sm-12"&gt;
              &lt;button className="btn btn-primary" type="submit"&gt;
                Create Event
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/form&gt;
      );
    }
  });
  </code></pre>