title: Custom react dropdown component re-rendering on every user input
body: <p>I'm having a bit of trouble with controlling the amount of re rendering done by React. 
  Say I've got this user input right here:</p>
  
  <pre><code>handleFirstNameChange: function(e) {
      this.setState({ firstName: e.target.value, userTyping: true });
  },
  render: function(){
  &lt;RB.Input value={this.state.firstName} onChange={this.handleFirstNameChange} name=""
                      type="text" label="First name" placeholder="First name.."/&gt;
  }
  </code></pre>
  
  <p>And this custom dropdown component:</p>
  
  <pre><code>&lt;SearchDropdown title="Role" options={this.props.currentUser.roles} 
                              selectedOptions={this.props.currentUser.selectedRoles} /&gt;
  </code></pre>
  
  <p>Every single time the user inputs a letter, the dropdown will re render every single option, even though (as it seems) the components have nothing common to each other.
  I've been trying to manage this by including a "userIsTyping" boolean as a prop to the dropdown component and checking it in ComponentShouldUpdate but it's becoming more of a problem now that I've got nested components.
  I'm still in my early stages of using React so I'm pretty sure there's something obvious here that I'm missing.</p>