SelectField has performance problems

[ajsharp]

I have 4 SelectField components in a form of mine, they all look like this:

<TextField valueLink={this.linkState('name')} />
<SelectField valueLink={this.linkState('propA')} 
  onChange={this.handleChange} 
  menuItems={this.props.propA} />
<SelectField valueLink={this.linkState('propB')} 
  onChange={this.handleChange} 
  menuItems={this.props.propB} />
<SelectField valueLink={this.linkState('propC')} 
  onChange={this.handleChange} 
  menuItems={this.props.propC} />
<SelectField valueLink={this.linkState('propD')} 
  onChange={this.handleChange} 
  menuItems={this.props.propD} />

In that same form, I have a TextField component -- when all 4 of the SelectField components are in the form, each keystroke in the TextField comes with a serious delay -- anywhere from 100-500ms. When I remove the 4 select fields from the rendered component, the delay disappears.

[ajsharp]

A quick chrome profile run shows a lot of time being spent in the Menu class' render method:

[ajsharp]

A different profile shows significant time spent in Object.assign, as well as various things that are hit by SelectField's render method.

[oliviertassinari]

Thanks for opening this issue. This is a more general issue regarding our components.
We have to implement an efficient shouldComponentUpdate. Here is the related issue #1176.
In the mean time, reducing the computation work in the render method would be great too.

[ajsharp]

@oliviertassinari Thanks. Also, it seems that removing the valueLink property from the select elements greatly improves the issue.

[oliviertassinari]

What are you using instead? By the way, valueLink is going to be deprecated by react if I refer to their source code.

[nathanmarks]

Closing in favour of #3289